React项目中优雅地使用CSS

可以写行内样式

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

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

...
<div style={styles.header}>Header</div>
...

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

属性名不能用 - 连接，一律转为==驼峰命名==方式：
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'

...
<div className={styles.header}>Header</div>
...

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

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

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

🎈 关于 CRA 更详细的配置可以可以参考如何扩展 Create React App 的 Webpack 配置

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

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

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

🎈 具体内容可以参考：Adding a CSS Modules Stylesheet

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

import styles from './style.module.css'

...
<div className={styles.header}>Header</div>
...