前言
react 框架的 js 和 html 代码部分，通过 jsx 语法将二者结合起来使用。但是 react 并没有像 vue 一样提供 <style scoped></style>的 css 编译器部分。因此在 react 工程中，如何写 css ，留给了用户自己选择。于是在 react 圈子里出现了各种各样的 css 方案。
react css 方案大致分为两种：
- 传统的 css 方案
- css in js 方案
传统的 css 方案
传统的 css 方案就是在 html 元素上用 style属性写内联样式或者声明类等选择器的名字，在单独的 css 文件中写样式，并直接在 js 中引入样式即可生效。
但这种方式需要开发者在命名选择器名字的时候加上特定的前缀防止冲突。
css in js 方案
现如今有几十种 css in js 的库。意思就是在 js 中写 css。这里介绍几种常用的库。
styled-components
styled-components 库算是 css in js 这些库里面 start 最高的。事实上也是相对来说比较好用的。可以保证 css 名字唯一不冲突。
PS：有的 react 脚手架工具或者框架已经内置了该功能，可能需要进行配置开启。
用法详见官网。这里列个官网的简单示例：
```javascript
import React from ‘react’;
import styled from ‘styled-components’;
// Create a
react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1<code>font-size: 1.5em;
text-align: center;
color: palevioletred;</code>;</p>
<p>// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section<code>padding: 4em;
background: papayawhip;</code>;</p>
<p>function MyUI() {
return (
// Use them like any other React component – except they’re styled!
<Wrapper>
</Wrapper>
);
}</p>
<pre><code><a name="mS3Kj"></a>
### css modules
用 [create-react-app](https://create-react-app.dev/) 和 [nextjs](https://nextjs.org/) 等这种 react 脚手架或者框架工具创建出来的 react 应用，已经内置支持了 css modules 的方案（通常只需要将 css 文件的名字加上 module 后缀即可使用，例如 xx.css -> xx.module.css）。原生的 react 项目需要单独安装 [react css modules](https://github.com/gajus/react-css-modules) 库来使用 css modules 功能。
> css modules 也是会生成唯一的类名。
css modules 的语法也很简单如下：
```css
// test.module.css
.title {
color: red;
}
</code></pre><pre><code class="lang-javascript">import styles from "./test.module.css";
export default function Test(){
return (
<div className={ styles.title }>hi</div>
)
}
</code></pre>
<p><a name="IHcs1"></a></p>
<h2 id="d1a8l8"><a name="d1a8l8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>参考</h2><p><a rel="nofollow" href="https://www.ruanyifeng.com/blog/2017/04/css_in_js.html">CSS in JS 简介 - 阮一峰的网络日志</a></p>
