在react项目中编写css,React项目中优雅地使用CSS

可以写行内样式

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

...