从 vue 转到 react 之后，样式这块不太适应，在 create-react-app 中，通常通过 import css 文件直接引入样式，这种方法就会出现全局污染的问题，css 使用全局选择器机制来设置样式，优点是方便重写样式，缺点是所有的样式都是全局生效，样式可能被错误覆盖，为了避免这种情况，就要进行样式隔离，目前流行的有以下两种方式：

css modules

create-react-app 中内置了使用 CSS Modules 的配置，和 vue 的 scoped 原理相似，都是在生成的 class 后面加了 hash 值，创建.css文件时需要以[name].module.css格式创建

/* style.module.css */
.text {
    color: blue
}

// app.jsx
import s from "./style.module.css";
class App extends Component {
  render() {
    return <div className={s.text}>css-module text</div>;
  }
}

/* 编译后 */
.text_3FI3s6uz {
    color: blue;
}

styled-component

目前社区里最受欢迎的一款 css in js 类库，个人感觉有点别扭，不太喜欢

// 引入styled-components
import styled from 'styled-components'

// 把给定的样式包装成一个组件
const Wrapper = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`
const Button = styled.button`
  width: 100px;
  color: white;
  background: skyblue;
`

render(
  <Wrapper>
    <Button>Hello World</Button>
  </Wrapper>
)

最后总结一下，有一说一，还是 vue 的 scoped 好用。

参考资料

https://chinese.freecodecamp.org/news/introduction-to-css-modules-part-one/
https://kuangpf.com/blog/2019/05/12/css-modules/
https://zhuanlan.zhihu.com/p/28876652