CSS-IN-JS 学习笔记

CSS-IN-JS 学习笔记

文章出处： 拉 勾 大前端 高薪训练营

集成 CSS 代码在 JS 文件

1. 为什么会有 CSS-IN-JS

CSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JS 代码中的解决方案，这种方案旨在解决 CSS 的局限性，例如缺乏动态功能，作用域和可移植性。

2. CSS-IN-JS 介绍

CSS-IN-JS 方案的优点：

1. 让CSS代码拥有独立的作用域，阻止CSS代码泄露到组件外部，防止样式冲突。
2. 让组件更具可移植性，实现开箱即用，轻松创建松耦合的应用程序。
3. 让组件更具可重用性，只需编写一次即可，可以在任何地方运行.不仅可以在同一-应用程序中重用组件，而且可以在使用相同框架构建的其他应用程序中重用组件。
4. 让样式具有动态功能，可以将复杂的逻辑应用于样式规则，如果要创建需要动态功能的复杂UI,它是理想的解决方案。

3. Emotion 库

3.1 Emotion 介绍

Emotion 是一个旨在使用 JS 编写 CSS 样式的库

npm install @emotion/core @emotion/styled

3.2 css 属性支持

1. JSX Pragma

通知 babel , 不再需要将 jsx 语法转换为 React.createElement 方法， 而是需要转换为 jsx 方法。

/** @jsx jsx */
import {
      jsx } from '@emotion/core'

2. Babel Preset

npm run eject
npm install @emotion/babel-preset-css-prop

在 package.json 文件中找到 babel 属性，加入如下内容：

"presets": [
  "react-app",
  "@emotion/babel-preset-css-prop"
]