React CSS

JSX 负责结构、state 负责数据，样式怎么组织？从最简单的全局样式表，到组件级 CSS Modules，再到把样式写进 JS 的 CSS-in-JS，各有适用场景。本节把这四种主流写法一次讲清，方便你按项目规模取舍。

全局样式表：import 一个 .css

在组件中直接 import CSS 文件，然后用 className 引用类名（注意是 className，不是 HTML 里的 class）。

// Button.jsx
import './Button.css';

export default function Button({ children }) {
  return <button className="btn-primary">{children}</button>;
}

/* Button.css */
.btn-primary {
  background: #2f7cf6;
  color: #fff;
  border: none;
  padding: 8px 16px;
}

内联样式：style 接收对象

React 的 style 与 HTML 不同，要传一个对象；属性名用驼峰写法，数字值会被自动加上 px。

export default function Box() {
  const boxStyle = {
    color: '#333',
    fontSize: 18, // 自动转成 18px
    borderLeft: '4px solid #f60',
  };

  return <div style={boxStyle}>内联样式示例</div>;
}

动态切换类名

样式随状态变化，最常用的手段是三元表达式或模板字符串来拼接 className。

export default function TabItem({ active, children }) {
  return (
    <li className={active ? 'tab-item active' : 'tab-item'}>
      {children}
    </li>
  );
}

CSS Modules：组件级样式隔离

把样式文件命名为 xxx.module.css，import 进来的对象，其属性值就是编译后的唯一类名，两个组件写同名类也不会互相污染。

// Button.jsx
import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.primary}>确定</button>;
}

/* Button.module.css */
.primary { background: green; color: white; }

CSS-in-JS：样式写进组件

styled-components 把样式写成模板字符串，直接生成带样式的组件，适合主题需要动态变化的场景。

import styled from 'styled-components';

const Card = styled.div`
  background: #222;
  color: #fff;
  padding: 16px;
  border-radius: 8px;
`;

export default function App() {
  return <Card>这张卡片的样式写在 JS 里</Card>;
}

小结

四种写法由「全局 → 局部 → 动态」递进：小项目用全局样式足够；要防样式冲突用 CSS Modules；要做动态主题选 CSS-in-JS；日常配合 className 拼接处理状态变化，就能覆盖绝大多数需求。