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 库的使用方式和语法 |
参考资料
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
网友评论