【React】React CSS 样式设置全攻略

在 React 中设置 CSS 样式主要有以下几种方式，各有适用场景：

1. 内联样式 (Inline Styles)

直接在 JSX 元素中使用 style 属性，值为 JavaScript 对象（使用驼峰命名法）

jsx 复制代码

function Component() {
  return (
    <div style={{ 
      color: 'red', 
      backgroundColor: 'lightblue',
      padding: '10px',
      borderRadius: '5px' // 注意驼峰命名
    }}>
      内联样式示例
    </div>
  );
}

2. 外部样式表 (External CSS)

创建独立的 .css 文件，通过 import 引入

css 复制代码

/* styles.css */
.container {
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
}

jsx 复制代码

import './styles.css'; // 引入样式文件

function Component() {
  return <div className="container">外部样式表示例</div>;
}

3. CSS Modules (推荐)

使用 [name].module.css 命名约定，实现局部作用域

css 复制代码

/* Component.module.css */
.error { 
  color: red;
  font-weight: bold;
}

jsx 复制代码

import styles from './Component.module.css'; // 自动生成唯一类名

function Component() {
  return <div className={styles.error}>CSS Modules 示例</div>;
}

4. CSS-in-JS 库 (如 styled-components)

通过 JavaScript 直接编写 CSS

bash 复制代码

npm install styled-components  # 先安装

jsx 复制代码

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. 动态样式 (根据状态变化)

结合状态管理和样式设置

jsx 复制代码

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 方案。