可以写行内样式

React 的 JSX 语法中并不能直接写 CSS 代码，不过我们可以把 CSS 代码变成一个个对象再绑定到相应的元素上。

// css object
const styles = {
header: {
color: "white",
backgroundColor: "red"
}
...
}
...
 
 

   Header 
 
 
 
...

行内样式需要注意以下几点：

属性名不能用 - 连接，一律转为==驼峰命名==方式：

margin-top → marginRight

font-size → fontSize

属性值必须加引号

末尾须使用逗号 ,

写行内样式太麻烦了

如果不想写行内样式，可能觉得这种写法太复杂，或是觉得对象形式的样式不习惯等等，那就可以尝试另外一种方式。

由于在 React 中 CSS 没有像 Vue 中的作用域 (scoped) 概念， 如果使用直接引入的方式那么所有的 CSS 样式都是作用域全局的，这样就使 CSS 异常的混乱，有可能导致页面样式相互影响。

常言道：“办法总比困难多😀”。

是的，为了解决这个棘手的问题，CSS模块化出现了。

如果你对 ES6 比较熟悉，那就对模块化比较了解。我们常常将一个模块通过 export/export default 的方式导出，在需要使用的时候通过 import 引入就可以了。就像下面的例子：

// add.js
export default Add(arg1, arg2){
return arg1 + arg2
}
// caculate.js
import Add from './add.js'
Add(1, 2) //3

CSS 模块化 做的就是以同样的方式 引入 CSS 文件并使其只在引入的页面生效，怎么实现呢？

只需要修改 webpack.config.js 的配置

rules: [
{
test:/\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true,
}
}
}
// 或者使用下面的写法
// {test:/\.css$/, use: ['style-loader', 'css-loader?modules']}
]

这样你就可以在页面中这样使用 CSS 了

/* style.css file*/
.header{
background-color: red;
}
import styles from './style.css'
...
 
 

   Header 
 
 
 
...

阿Sir，找不到 webpack.config.js 怎么办？

如果你使用 create-react-app (简称为 CRA) 构建项目的话你会发现项目中根本找不到 webpack 的相关配置，那不就没办法配置了吗？😮

当然不是， CRA 工具已经帮你做了很多的配置并把他们隐藏了起来，如果你想要重新获得对 webpack 的控制权，可以使用这个命令 yarn run eject 把相关配置文件暴露出来 (实际上是把封装在 CRA 中的配置反编译到当前的项目中，==这个操作是不可逆转的==)，这样就又可以为所欲为了。

不想反编译有办法吗？急，在线等...

如果你觉得这样子比较麻烦或是不想让他们暴露出来，还是有办法解决的Q

在 react-scripts@2.0.0 或者更高的版本中已经支持 CSS 的模块化了 (也就不需要手动去修改 webpack.config.js 中的配置了)，你只需要以 [name].module.css 方式命名就可以了。

/* style.module.css file*/
.header{
background-color: red;
}
import styles from './style.module.css'
...
 
 

   Header 
 
 
 
...