如何给React组件添加样式？

给React组件打扮一下，让它好看点，有好几种路子。每种方法都有自己的脾气，选哪种得看你的组件是啥性格，还有项目多大。

最直接的办法：内联样式

在JSX里，直接用style属性写，这是最快上手的。不过得注意，这里传的不是CSS字符串，而是一个JavaScript对象。

function AlertBox() {
  return (
    <div style={{
      padding: '20px',
      backgroundColor: '#f8d7da',
      border: '1px solid #f5c6cb',
      borderRadius: '4px'
    }}>
      这是一条警告信息！
    </div>
  );
}

好处是样式跟组件绑得死死的，动态改起来也方便（比如根据状态改颜色）。缺点嘛，不能写伪类（像:hover），媒体查询也费劲，代码一多看起来就有点乱。

导入CSS文件：传统但管用

就跟普通的网页开发一样，建个.css文件，然后在组件文件里import进来。

/* AlertBox.css */
.alert {
  padding: 20px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

// AlertBox.js
import './AlertBox.css';
function AlertBox() {
  return <div className="alert">这是一条警告信息！</div>;
}

这法子简单，所有CSS功能都能用。但有个老问题：样式是全局的。你得小心命名，不然这个组件的.alert类名可能会不小心影响到别的地方。

CSS Modules：把样式关进组件里

如果你怕全局污染，又想要CSS的全部能力，CSS Modules是个好选择。它会把类名自动编译成唯一的字符串。

/* AlertBox.module.css */
.alert { ... } /* 编译后可能变成 `AlertBox_alert_abc123` */

import styles from './AlertBox.module.css';
function AlertBox() {
  return <div className={styles.alert}>这是一条警告信息！</div>;
}

这样，.alert的样式就只属于这个组件了，彻底跟别人没关系。现在很多打包工具（像Webpack、Vite）都默认支持这个。

CSS-in-JS：把样式写成JavaScript

这是比较现代的做法，用JavaScript来写和管理CSS。流行的库有Styled-components、Emotion。

import styled from 'styled-components';
const StyledAlert = styled.div`
  padding: 20px;
  background-color: ${props => props.variant === 'error' ? '#f8d7da' : '#d1ecf1'};
  border-radius: 4px;
`;
function AlertBox({ variant }) {
  return <StyledAlert variant={variant}>这是一条信息！</StyledAlert>;
}

样式直接写在组件旁边，还能用props动态控制，封装性极好。不过它会增加一点运行时开销，而且你得多学一套API。

选哪个？如果是小项目或者快速原型，内联样式或者普通CSS就行。中大项目，尤其是团队协作，CSS Modules或CSS-in-JS能帮你省去很多样式冲突的烦恼。没有绝对最好的，只有最适合你当前场景的。