React 的 CSS in JS

React中常用的css写法

css 这个就给我震撼了。

不像 Vue，原生 React 对 CSS 的支持并不友好。所以怎么在 React 里写 CSS 竟有许多学问。

阅读 Ant Design Style 文章后发现 CSS IN JS 这样的概念。好处自然是可以动态改变样式，React 生态里有非常多第三方库提供相关功能。

比较流行的有 styled-components ，以及 @emotion/css 等。我学习的 project 用的就是 styled-components 库，vscode 用户可以下载 vscode-styled-components 插件，获得高亮提示。

如果使用 Webstorm，已经内置了插件，自动高亮。

优缺利弊

在 CSS in JS 写法对比中，大概的感受就是，动态性、耦合度以及性能之不可能三角的取舍。

antd 封了一套自己的style 组件，效果如何有待验证。