1. 前言
- react 中 写css 比较麻烦,总结下有哪些
2. 普通的 CSS 文件引入：
- 在 React 组件中使用
import语句引入外部的 CSS 文件，然后直接在 JSX 中应用类名或样式。- 这种方式可以使用任何
CSS 预处理器（如 Sass、Less）。- 样式在
全局范围内生效，需要注意样式的命名冲突问题。
上 demo
// styles.css .container { background-color: #f0f0f0; padding: 20px; } // Component.jsx import React from 'react'; import './styles.css'; const Component = () => { return ( <div className="container"> <h1>Hello, World!</h1> </div> ); }; export default Component;
3. CSS 模块化：
- 使用 CSS
模块化可以将 CSS 文件与组件进行关联，使得每个组件的样式只在当前组件中生效。- 使用 import 语句引入 CSS 模块文件，并通过对象的方式获取对应的类名或样式。
- 类名在编译时进行
哈希处理，避免了全局命名冲突问题。
上demo
// Component.module.css .container { background-color: #f0f0f0; padding: 20px; } // Component.jsx import React from 'react'; import styles from './Component.module.css'; const Component = () => { return ( <div className={styles.container}> <h1>Hello, World!</h1> </div> ); }; export default Component;
4. CSS-in-JS：
- 使用
CSS-in-JS库（如 styled-components、Emotion）可以直接在组件中定义和应用样式。- 样式以 JavaScript
对象或模板字符串的形式嵌入到组件中，可以使用 JavaScript 语法进行动态样式处理。- 样式作用于具体的组件实例，避免了全局样式冲突的问题。
上 demo
import React from 'react'; import styled from 'styled-components'; const Container = styled.div` background-color: #f0f0f0; padding: 20px; `; const Component = () => { return ( <Container> <h1>Hello, World!</h1> </Container> ); }; export default Component;
5. 区别 咱还是用 表格对比吧
| 普通 CSS 文件引入 | CSS 模块化 | CSS-in-JS | |
| 引入方式 | 使用 import 引入外部 CSS 文件 |
使用 import 引入 CSS 模块文件 |
使用相应的 CSS-in-JS 库 |
| 类名命名冲突问题 | 可能会发生全局命名冲突 | 通过哈希处理类名，避免全局命名冲突 | 不会发生命名冲突 |
| 样式作用范围 | 全局范围内生效 | 组件内部作用，避免全局影响 | 组件内部作用，避免全局影响 |
| 动态样式处理 | 需要在样式文件中使用预处理器或动态类名的技巧 | 无需特殊处理，直接在组件中应用动态样式 | 直接在组件中使用 JavaScript 语法进行动态样式处理 |
| 代码复用性 | 可以在多个组件中共用相同的 CSS 文件 | 样式与组件关联，可复用，但需要通过对象的方式获取样式类名 | 样式与组件关联，可复用，直接在组件中定义和应用样式 |
| 工具生态支持 | 支持各种 CSS 预处理器和构建工具 | 部分构建工具和框架对 CSS 模块化有内置支持 | CSS-in-JS 库提供丰富的工具和特性支持 |
| 学习曲线 | 相对较低，使用常见的 CSS 语法 | 需要了解 CSS 模块化的基本概念和使用方式 | 需要学习相应的 CSS-in-JS 库的使用方式和语法 |
