【React】知识梳理：React中使用CSS样式的五种方法

2023-09-22 06:45| 来源: 网络整理| 查看: 265

由于 React的JSX语法，能在React中使用样式的方式有很多，这里主要介绍在React中经常使用CSS样式的五种方法。主流推荐CSS Modules和Styled Components。

行内样式

行内样式是一种最基本的写法，也是用HTML时写的内联样式那样：

class App extends React.Component { // ... render() { return ( 行内样式 ) } }

需要注意的是，这里的css样式名采用驼峰命名法：如font-size →fontSize，并且需要将CSS属性放在双大括号之间。

声明样式

声明样式其实是行内样式的一种改进写法，在render函数外部创建style对象，然后传递给组件，让css与标签分离。

class App extends React.Component { //... const style1={ background:'#eee', width:'200px', height:'200px' } const style2={ color:'red', fontSize:'40px' } render() { return ( 行内样式 ) } }

注意这里实用的还是驼峰命名法，其次因为已经在外部声明了style对象，所以在JSX中使用的时候只需要一个大括号{}。

引入样式

引入样式就是将CSS文件写下外部，再引入使用。

css 文件

.person{ width: 60%; margin:16px auto; border: 1px solid #eee; box-shadow: 0 2px 3px #ccc; padding:16px; text-align: center; }

js 文件

import React from 'react'; import './Person.css'; class App extends React.Component { //.... render() { return ( person:Hello world ) } } export default App;

因为CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复。

CSS Modules模块化

CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。

create-react-app2.0以上版本的CSS Modules的用法：

局部样式

命名规则: xxx.module.css

//引入方式 import xxx from 'xxx.module.css' //用法

全局样式

命名规则: xxx.css

//引入方式 import ‘xxx.css’ //用法

全局样式与局部样式混合使用：其中styleName表示全局样式 ${xxx['styleName']表示局部样式，注意{ }内使用模板字符串。

person.module.css

.person{ width: 60%; margin:16px auto; border: 1px solid #eee; box-shadow: 0 2px 3px #ccc; padding:16px; text-align: center; }

person.js

import React, { Component } from 'react'; //局部样式 import styles from './Person.module.css'; //全局样式 import '../App.css' class App extends Component { render() { return ( person:Hello world ) } } export default App; Styled-component

随着组件化时代的来临，前端应用开始从组件的层面对 CSS 进行封装：也就是通过 JS 来声明、抽象样式从而提高组件的可维护性；在组件加载时动态的加载样式，动态生成类名从而避免全局污染。Styled Component以组件的形式来声明样式，让样式也成为组件从而分离逻辑组件与展示组件。

Styled Component是react的一个第三方库，是CSS in JS 的优秀实践和代表，将CSS写在JS中，可以实现常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在JSX上面，HTML、CSS、JS三者再次内聚，同时也实现H5的语义化标签表现形式。

安装

npm install --save styled-components

使用

// 创建一个 Title 组件,它将渲染一个附加了样式的标签 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 创建一个 Wrapper 组件,它将渲染一个附加了样式的标签 const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // 就像使用常规 React 组件一样使用 Title 和 Wrapper render( Hello World! );

【本文地址】

公司简介

联系我们