在React中组件如何使用本地的样式，而不对其他组件产生影响呢？我们这里需要使用样式的模块化处理，使得组件的样式只在该组件内部起作用。
这里我们通过两个组件应用说明。
定义组件
- 定义Hello组件与自定义样式
Hello/index.css
.title{ color:red; }
Hello/index.jsx
import {Component} from "react" import "./index.css" export default class Hello extends Component { render(){ return <h1 className="title">Hello World</h1> } }
- 定义Welcome组件与自定义样式
Welcome/index.css
.title{ color:green; }
Welcome/index.jsx
import { Component } from "react"; import "./index.css" export default class Welcome extends Component{ render(){ return <h2 className="title">Welcome</h2> } }
- 引入组件大到App容器
import { Component} from "react" import Hello from "./components/Hello" import Welcome from "./components/Welcome" export default class App extends Component { render() { return (<div>App <Hello/> <Welcome/> </div>) } }
- 查看效果
从上图我们看到字体颜色中我们的Hello World应该是红色，但是确实绿色，这是因为两个组件都被引入到了App容器里面，以致于css样式被覆盖了。
改造样式模块化
步骤1：请在CSS文件中使用:local关键字来定义本地作用域的样式。
:local .title { color: green; }
步骤2：修改样式文件名称
index.css ===> index.module.css
步骤3：修改样式引入方式
import welcomesty from "./index.module.css"
步骤4：修改类名使用方式
import { Component } from "react"; import welcomesty from "./index.module.css" export default class Welcome extends Component{ render(){ return <h2 className={welcomesty.title}>Welcome</h2> } }
步骤5：查看效果
从上图可以看到，组件的字体颜色都是其内部样式文件定义的，并没有被覆盖，说明我们的样式模块化已经生效。
总结
在React中，可以使用CSS模块来为组件添加样式。要使用CSS模块，请在CSS文件中使用**:local关键字**来定义本地作用域的样式。例如，以下CSS代码将定义一个本地作用域的样式：
:local .myClass { color: red; }
然后，在React组件中，可以使用import语句将CSS模块导入组件中，并使用className属性将样式应用于组件。例如，以下代码将导入名为styles的CSS模块，并将其应用于MyComponent组件：
import styles from './path/to/styles.module.css'; function MyComponent() { return ( <div className={styles.myClass}> Hello World! </div> ); }
在这个例子中，styles.myClass将被解析为一个唯一的类名，以确保样式只应用于MyComponent组件。
注意：这里的css样式文件名后缀是:.module.css
