css-in-js 比起Linaria,性能要差很多
CSS-in-JS 让你可以在 JavaScript 或 TypeScript 代码中编写 CSS 来设置 React 组件的样式：
const styles = styled.div``;React 社区中最多的 styled-components 和 Emotion
优劣势
优势
- 局部作用域样式
- 相关代码都放在同一目录下，甚至同一个文件内，方便维护 s
- 可以在样式中使用 JavaScript 变量。
劣势
- CSS-in-JS 增加了运行时开销。当组件渲染时，CSS-in-JS 库必须将样式“序列化”为可以插入文档的 Pure CSS。显然这需要额外的 CPU 消耗，大概会有 40%以上的差距，具体看组件大小
- CSS-in-JS 增加了包体积。这很明显——每个访问你网站的用户现在都需要下载 CSS-in-JS 库的 JavaScript。Emotion 是 7.9 kB 压缩后，styled-components 是 12.7 kB
- CSS-in-JS 会使 React 开发者工具变的很乱，难以看懂。
- 频繁插入 CSS Rules 会使浏览器做很多额外工作
- 用 CSS-in-JS,更容易出错，特别是在使用 SSR 和组件库时。