1.先说一说 CSS-in-JS 是什么吧。

顾名思义，CSS-in-JS 就是在 JS 中直接编写 CSS 的技术，而不是独立为一些 .css，.scss 或者 less 之类的文件，也是 React 官方推荐的编写 CSS 的方案。

我在项目中使用的是 styled-components，下面就以这个库为例简单介绍一下：

import React from 'react';

import styled from 'styled-components';

//创建一个 <Title> react 组件
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个 <Wrapper> react 组件
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 像使用任何其他 React 组件一样使用它们——除了它们的样式！
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

这是在浏览器中的显示：

通过 styled-components，你可以使用 ES6 的标签模板字符串语法（Tagged Templates）为需要 styled 的 Component 定义一系列 CSS 属性，当该组件的 JS 代码被解析执行的时候，styled-components 会动态生成一个 CSS 选择器，并把对应的 CSS 样式通过 style标签的形式插入到 head标签里面。动态生成的 CSS 选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。

2.CSS-in-JS 的好处

局部样式：CSS 只有一个全局的命名空间，在为选择器起名字时，为了避免与页面中其他的选择器发生冲突，我们通常会在名字前加一些前缀，而使用 CSS-in-JS 方案后，我们就不再有这样的烦恼了，CSS-in-JS会提供自动局部CSS作用域的功能，你为组件定义的样式会被限制在这个组件，而不会对其他组件的样式产生影响。
便于删除无用的CSS样式：CSS-in-JS会把样式和组件绑定在一起，当这个组件要被删除时，直接把所有代码删掉就好了，不用担心删掉之后会对其他组件的样式产生影响。

在React项目中使用 CSS-in-JS方案：styled-components

1.先说一说 CSS-in-JS 是什么吧。

2.CSS-in-JS 的好处