React CSS样式使用完全指南
面向编程小白的React样式方案详解，从基础到高级一网打尽
内联样式 (Inline Styles)
什么是内联样式？
直接在JSX元素上使用style属性添加样式，样式值是JavaScript对象。
function Button() {
const buttonStyle = {
backgroundColor: ‘#3498db’,
color: ‘white’,
padding: ’10px 20px’,
borderRadius: ‘5px’,
border: ‘none’,
cursor: ‘pointer’
};
return (
<button style={buttonStyle}>
点击我
</button>
);
}
const buttonStyle = {
backgroundColor: ‘#3498db’,
color: ‘white’,
padding: ’10px 20px’,
borderRadius: ‘5px’,
border: ‘none’,
cursor: ‘pointer’
};
return (
<button style={buttonStyle}>
点击我
</button>
);
}
特点： 样式写成驼峰命名(camelCase)，值用引号包裹的字符串。适合简单、动态变化的样式。
注意： 伪类(:hover)和媒体查询无法使用，性能不如CSS类
外部样式表 (CSS Stylesheets)
传统CSS文件引入
创建独立的.css文件，在React组件中导入使用
/* styles.css */
.button {
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
// Button.jsx
import ‘./styles.css’;
function Button() {
return <button className=“button”>点击我</button>;
}
.button {
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
// Button.jsx
import ‘./styles.css’;
function Button() {
return <button className=“button”>点击我</button>;
}
优点： 传统方式，支持所有CSS特性，浏览器兼容性好
缺点： 样式是全局的，可能产生命名冲突，需要用特定命名规范避免
CSS模块 (CSS Modules)
局部作用域的CSS
创建.module.css文件，类名在导入时会自动转换为唯一名称
/* Button.module.css */
.primary {
background-color: #e74c3c;
color: white;
padding: 12px 25px;
border-radius: 6px;
font-weight: bold;
}
// Button.jsx
import styles from ‘./Button.module.css’;
function Button() {
return <button className={styles.primary}>点击我</button>;
}
.primary {
background-color: #e74c3c;
color: white;
padding: 12px 25px;
border-radius: 6px;
font-weight: bold;
}
// Button.jsx
import styles from ‘./Button.module.css’;
function Button() {
return <button className={styles.primary}>点击我</button>;
}
优势： 自动局部作用域，避免命名冲突，使用方式接近传统CSS
注意： 文件必须以.module.css结尾，类名访问使用styles对象
CSS-in-JS (Styled Components)
用JavaScript写CSS
使用第三方库（如styled-components）将CSS直接写在JS文件中
import styled from ‘styled-components’;
// 创建带样式的组件
const StyledButton = styled.button`
background-color: ${props => props.primary ? ‘#9b59b6’ : ‘#ecf0f1’};
color: ${props => props.primary ? ‘white’ : ‘#2c3e50’};
padding: 12px 24px;
border-radius: 8px;
border: none;
font-size: 1rem;
cursor: pointer;
transform: scale(1);
transition: transform 0.3s;
&:hover {
transform: scale(1.05);
}
`;
function Button() {
return (
<>
<StyledButton>普通按钮</StyledButton>
<StyledButton primary>主按钮</StyledButton>
</>
);
}
// 创建带样式的组件
const StyledButton = styled.button`
background-color: ${props => props.primary ? ‘#9b59b6’ : ‘#ecf0f1’};
color: ${props => props.primary ? ‘white’ : ‘#2c3e50’};
padding: 12px 24px;
border-radius: 8px;
border: none;
font-size: 1rem;
cursor: pointer;
transform: scale(1);
transition: transform 0.3s;
&:hover {
transform: scale(1.05);
}
`;
function Button() {
return (
<>
<StyledButton>普通按钮</StyledButton>
<StyledButton primary>主按钮</StyledButton>
</>
);
}
优势： 完美组件化，支持JS变量和逻辑，自动添加浏览器前缀
注意： 需要安装额外库，增加包大小，学习曲线较陡
实用技巧与最佳实践
样式处理技巧
1. 条件类名 – 根据状态动态添加类名
import ‘./Button.css’;
function Button({ isActive }) {
const className = `button ${isActive ? ‘active’ : ”}`;
return <button className={className}>按钮</button>;
}
function Button({ isActive }) {
const className = `button ${isActive ? ‘active’ : ”}`;
return <button className={className}>按钮</button>;
}
2. CSS类库 – 使用现成解决方案
// 安装: npm install bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’;
function Button() {
return (
<button className=“btn btn-primary”>
Bootstrap按钮
</button>
);
}
import ‘bootstrap/dist/css/bootstrap.min.css’;
function Button() {
return (
<button className=“btn btn-primary”>
Bootstrap按钮
</button>
);
}
3. 全局样式 – 在index.css中定义全局样式
/* index.css */
body {
margin: 0;
font-family: ‘Roboto’, sans-serif;
background-color: #f8f9fa;
}
/* 在index.js中导入 */
import ‘./index.css’;
body {
margin: 0;
font-family: ‘Roboto’, sans-serif;
background-color: #f8f9fa;
}
/* 在index.js中导入 */
import ‘./index.css’;
React样式方案比较
| 方法 | 学习曲线 | 作用域 | 动态样式 | 性能 | 推荐场景 |
|---|---|---|---|---|---|
| 内联样式 | 简单 | 局部 | 优秀 | 一般 | 简单组件、少量样式 |
| 外部CSS | 简单 | 全局 | 困难 | 优秀 | 传统项目、大型应用 |
| CSS模块 | 中等 | 局部 | 中等 | 优秀 | 大多数React应用 |
| CSS-in-JS | 较陡 | 局部 | 优秀 | 中等 | 组件库、高度交互应用 |
选择建议
✅ 推荐使用
- 初学者：CSS模块 + 外部CSS
- 中小项目：CSS模块为主
- 组件库：CSS-in-JS方案
- 全局样式：外部CSS文件
❌ 避免使用
- 大量使用内联样式
- 全局CSS不加以管理
- 同时混用多种样式方案
- 过度依赖CSS-in-JS导致包过大