React中编写css的几种方式

React中编写css的几种方式

1. 使用的是原生css样式，在.js文件中引入并使用className(原生css, 缺点是不方便样式隔离，容易造成样式污染)
2. 行内样式（缺点：行内样式的通用缺点）
3. CSS Module 例如：index.module.scss index.module.less index.module.css
4. css-in-js

css-in-js是在js中直接编写css的技术，也是react官方推荐的编写css的方案。CSS Module也具有良好的开发体验，性能也更好。

优点：

1. 同vue的scpoe可以做到样式隔离的效果
2. 代码共享，轻松在 JS 和 CSS 之间共享常量和函数
3. 方便CSS单元化测试

劣势：

1. 增加运行时开销。
2. 增加构建后产物体积。
3. 使 React DevTools 变得混乱，debug 时可读性变差

CSS-in-JS并不是一颗能完美解决样式维护难题的银弹，但是通过借助一定最佳实践后，足以应对大多数前端需求，比如主题切换、组件样式封装、用户端样式覆盖等等，并显著提升前端团队在维护样式时的工作效率，

css-in-js方案比较

• 从体积来看：emotion的体积是最小的。
• 从技术生态环境（以及流行程度）：styled-components的star最多，文档相对来讲也是最完善的。

• 从支持的特性来看：emotion、aphrodite、jss支持的特性是最多的。

  CSS-in-JS Playground是一个可以快速尝试不同CSS-in-JS实现的网站，在线尝试（https://www.cssinjsplayground.com/）