【React】React CSS 样式设置全攻略
在 React 中设置 CSS 样式主要有以下几种方式，各有适用场景：
1. 内联样式 (Inline Styles)
直接在 JSX 元素中使用 style 属性，值为 JavaScript 对象（使用驼峰命名法）
function Component() {return (<div style={{ color: 'red', backgroundColor: 'lightblue',padding: '10px',borderRadius: '5px' // 注意驼峰命名}}>内联样式示例</div>);
}
2. 外部样式表 (External CSS)
创建独立的 .css 文件，通过 import 引入
/* styles.css */
.container {padding: 20px;border: 1px solid #ccc;margin: 10px;
}
import './styles.css'; // 引入样式文件function Component() {return <div className="container">外部样式表示例</div>;
}
3. CSS Modules (推荐)
使用 [name].module.css 命名约定，实现局部作用域
/* Component.module.css */
.error { color: red;font-weight: bold;
}
import styles from './Component.module.css'; // 自动生成唯一类名function Component() {return <div className={styles.error}>CSS Modules 示例</div>;
}
4. CSS-in-JS 库 (如 styled-components)
通过 JavaScript 直接编写 CSS
npm install styled-components # 先安装
import styled from 'styled-components';// 创建带样式的组件
const StyledButton = styled.button`background: ${props => props.primary ? 'blue' : 'white'};color: ${props => props.primary ? 'white' : 'blue'};padding: 10px 20px;border-radius: 4px;
`;function Component() {return (<><StyledButton>普通按钮</StyledButton><StyledButton primary>主按钮</StyledButton></>);
}
5. 动态样式 (根据状态变化)
结合状态管理和样式设置
function DynamicComponent() {const [isActive, setIsActive] = useState(false);// 动态类名const buttonClasses = `btn ${isActive ? 'btn-active' : ''}`;// 动态内联样式const divStyle = {transform: isActive ? 'scale(1.1)' : 'none',transition: 'transform 0.3s'};return (<div><div style={divStyle}>动态缩放元素</div><button className={buttonClasses}onClick={() => setIsActive(!isActive)}>{isActive ? '激活中' : '未激活'}</button></div>);
}
最佳实践建议：
- 组件级样式 → 首选 CSS Modules 或 CSS-in-JS
- 全局主题/基础样式 → 使用外部样式表
- 简单动态样式 → 内联样式或动态类名
- 复杂交互/主题 → CSS-in-JS 解决方案
常见问题解决：
类名冲突 → 使用 CSS Modules 自动生成唯一类名
伪类/媒体查询 → 避免用内联样式（使用 CSS/CSS-in-JS）
全局样式污染 → 为根元素添加命名空间
动态主题切换 → 考虑使用 CSS 变量或 ThemeProvider (CSS-in-JS)
根据项目规模和团队偏好选择合适的方式，中小型项目推荐 CSS Modules + 少量内联样式，大型项目可考虑 CSS-in-JS 方案。