为了避免全局作用域的CSS带来的副作用，React推荐使用CSS模块化进行组件样式管理。
使用CSS模块化的步骤如下：
npm install --save-dev css-loader style-loader在React组件所在的目录下，创建一个名为style.module.css的文件。
├── components/
│ ├── MyComponent.js
│ └── style.module.css
└── index.jsstyle.module.css文件中的样式类名使用:local()进行声明，如下所示：
/* style.module.css */
.header {
color: red;
}
.content {
color: blue;
}在React组件中，使用import引入style.module.css文件，并使用className指定样式类名。
import React from 'react';
import styles from './style.module.css';
export default function MyComponent() {
return (
<div className={styles.header}>
<p className={styles.content}>This is my component.</p>
</div>
);
}在MyComponent组件中，<div>元素的样式类名为styles.header，<p>元素的样式类名为styles.content。
这样，在渲染MyComponent组件时，React会自动将styles.header和styles.content转换为唯一的、局部作用域的类名，并将对应的样式应用到<div>和<p>元素。