方案概览
React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案;React 样式方案主要有:
内联样式
:简单直观,适合动态样式和小型项目,但复用性差,功能有限;module css
:提供局部作用域,支持所有 CSS 功能,适合中大型项目,但配置复杂;css in js
:组件化样式,动态生成样式,功能强大,适合大型项目,但性能开销和学习成本较高;tailwindcss
:实用优先,快速开发 UI,适合所有项目,但类名冗长,灵活性受限;
内联样式
通过 style 属性直接在组件中定义样式;
优势
-
简单直观
:直接在 JSX 中定义样式,容易理解和使用; -
避免全局命名冲突
:因为样式是局部的,不会与其他组件的样式冲突; -
动态样式
:可以方便地使用 JavaScript 表达式动态生成样式;
缺点
-
样式复用差
:无法轻易复用样式,导致样式代码重复; -
缺乏伪类和伪元素支持
:无法使用 :hover、:active 等伪类和伪元素; -
CSS 功能有限
:许多 CSS 功能 (如媒体查询、关键帧动画等) 不能使用;
示例
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray'
};
function StyledComponent() {
return <div style={divStyle}>Hello, world!</div>;
}
CSS Modules
CSS 模块允许为 CSS 类名添加局部作用域,避免样式冲突;
文件名通常以 .module.css 结尾;
优势
-
局部作用域
:每个模块的 CSS 都是局部的,不会全局污染; -
复用性好
:可以在不同组件中导入相同的样式文件,复用性强; -
支持所有 CSS 功能
:可以使用所有 CSS 功能,包括媒体查询、伪类和伪元素;
缺点
-
配置复杂
:需要通过构建工具 (如 Webpack) 进行配置; -
样式依赖文件系统
:样式存储在独立的文件中,可能影响开发体验;
示例
/* styles.module.css */
.container {
color: red;
}
import styles from './styles.module.css';
function StyledComponent() {
return <div className={styles.container}>Hello, world!</div>;
}
CSS-in-JS
-
CSS-in-JS 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义;
-
目前比较流行的 CSS-in-JS 的库:
- styled-components
- emotion
- glamorous
- …
优势
-
组件化样式
:样式与组件逻辑紧密结合,提升了组件的可维护性; -
动态样式
:支持通过 props 或 state 动态生成样式; -
避免全局冲突
:生成唯一的 className,避免样式冲突; -
丰富的功能
:支持嵌套、伪类、媒体查询等高级 CSS 功能;
缺点
-
性能开销
:在运行时生成样式,可能会增加性能开销,特别是在大量组件中使用时; -
学习成本
:需要学习特定的库和语法; -
打包体积
:可能增加打包后的 JavaScript 体积; -
SSR
:支持较困难;
Styled Components
-
使用 styled-components 库可以在 JavaScript 中编写实际的 CSS,提供了组件级别的样式管理;
-
示例:
import { createRoot } from "react-dom/client"; import styled from 'styled-components'; const StyledButton = styled.button` padding: 12px 24px; background-color: #3b82f6; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; &:hover { background-color: #2563eb; } &:active { transform: scale(0.98); } `; function App() { return <StyledButton>Click Me</StyledButton>; } createRoot(document.getElementById("root")).render(<App />);
emotion
-
Emotion 是一个强大的 CSS-in-JS 库,提供了灵活的样式管理方案;
-
示例:
import { createRoot } from "react-dom/client"; import styled from "@emotion/styled"; const StyledButton = styled.button` padding: 12px 24px; background-color: #3b82f6; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; &:hover { background-color: #2563eb; } &:active { transform: scale(0.98); } `; function App() { return <StyledButton>Click Me</StyledButton>; } createRoot(document.getElementById("root")).render(<App />);
tailwindcss
Tailwind CSS 是一个实用优先 (utility-first) 的 CSS 框架,与传统的 UI 框架 (如 Bootstrap) 有根本性不同;
它提供了一套低级别的实用类 (utility classes),让开发者可以直接在 HTML/JSX 中快速构建定制化设计;
核心特点
-
提供原子化的 CSS 类,每个类通常只对应一个 CSS 属性;
<div class="p-4 bg-blue-500 text-white rounded-lg"></div>
-
内置响应式前缀系统;
<div class="text-sm md:text-base lg:text-lg"></div>
-
(Just-In-Time) 按需生成样式,极大减少文件体积;
优势
-
开发速度:快速原型设计和迭代;
-
一致性:强制执行设计系统规范;
-
灵活性:不受预制组件限制;
-
性能:生产环境下 CSS 极小;
-
维护性:样式与标记共存,无需在文件间跳转;
局限
-
学习曲线:需记忆大量实用类;
-
设计能力依赖:需要良好的 CSS 基础;
-
初期设置:配置较复杂;
-
标记膨胀:HTML/JSX 中类名可能很长;
React✍️ React 进阶特性
上一篇