CSS-IN-JS 学习笔记
文章出处: 拉 勾 大前端 高薪训练营
集成 CSS 代码在 JS 文件
1. 为什么会有 CSS-IN-JS
CSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JS 代码中的解决方案,这种方案旨在解决 CSS 的局限性,例如缺乏动态功能,作用域和可移植性。
2. CSS-IN-JS 介绍
CSS-IN-JS 方案的优点:
- 让CSS代码拥有独立的作用域,阻止CSS代码泄露到组件外部,防止样式冲突。
- 让组件更具可移植性,实现开箱即用,轻松创建松耦合的应用程序。
- 让组件更具可重用性,只需编写一次即可,可以在任何地方运行.不仅可以在同一-应用程序中重用组件,而且可以在使用相同框架构建的其他应用程序中重用组件。
- 让样式具有动态功能,可以将复杂的逻辑应用于样式规则,如果要创建需要动态功能的复杂UI,它是理想的解决方案。
3. Emotion 库
3.1 Emotion 介绍
Emotion 是一个旨在使用 JS 编写 CSS 样式的库
npm install @emotion/core @emotion/styled
3.2 css 属性支持
- JSX Pragma
通知 babel , 不再需要将 jsx 语法转换为 React.createElement 方法, 而是需要转换为 jsx 方法。
/** @jsx jsx */
import { jsx } from '@emotion/core'
- Babel Preset
npm run eject
npm install @emotion/babel-preset-css-prop
在 package.json 文件中找到 babel 属性,加入如下内容:
"presets": [
"react-app",
"@emotion/babel-preset-css-prop"
]