探索React（第三期）：CSS In React

生有热烈，藏与俗常~

行内样式

在jsx文件中定义样式变量和定义普通滴变量是一样一样的~

<div style={{ background:'red',fontSize:14}} />
//等价于
let textColor={
    background:red,
    fontSize:14
}
<div style={textColor} />

引入样式表

//CSS文件中:
.textcolor {
  background-color: red;
  font-size: 14px;
}
//jsx文件中
import "./index.css";
<div className="textColor" />

然鹅，这时候问题来了，如果在其他的文件中也使用相同的标签名，比如在app.jsx中也使用了标签名为textcolor的className，会出现该文件中的内容也被渲染了。这说明了在React中，虽然我们编写代码的时候在不同的文件目录下，但是在编译打包之后，引用的其实是同一个CSS文件~

CSS Module

CSS Module的功能很单纯，只加入了局部作用域和模块依赖，而这正是网页组件最急需的功能。
在React脚手架中默认是开启了css模块化的，详细的可以运行npm run eject看看webpack的配置，在最顶部我们可以看到const cssModuleRegex = /.module.css$/ 这行代码，所以我们只需要考虑好文件的命名即可。

//index.module.css
.textColor {
  background-color: red;
  width: 200px;
  height: 200px;
}
//index.tsx
import styles from "./index.module.css";
<div className={styles.textColor} />

编译之后构建工具会将其编译成一个哈希字符串，如class="404_textColor__3XeMV"，这么来，这个巴拉巴拉的字符串就会变得独一无二，只对该组件生效啦~

Class的组合

在CSS Module中，一个选择器还可以继承另一个选择器的规则，只需要使用composes关键词即可。

.className {
  background-color: blue;
}
.bgColor {
  width: 200px;
  height: 200px;
  /* composes: bgcolor from "./common.module.css"; */
  composes: className;
}

当我们的项目越来越大，需要抽离通用样式时，我们可以创建一个common.module.css，在其中写css样式，通过composes: bgcolor from "./common.module.css"; 这样的方式引入进来。

还有哪些CSS管理方式

目前比较流行的CSS管理工具还有styled-components ，Classnames等等，具体的用法可以看下官方的文档啦~~
styled-components：styled-components.com/
Classnames：www.npmjs.com/package/cla…