在React中使用CSS Modules可以通过以下步骤完成:
- 安装CSS Modules库:
使用npm命令安装CSS Modules库:
npm install --save-dev css-modules
-
创建CSS模块:
在React组件的文件夹中创建一个CSS文件,并在文件名后添加.module
,表示该文件是一个CSS模块。例如,创建一个名为styles.module.css
的CSS文件。 -
在CSS模块中定义样式:
在CSS模块中定义所需的样式。与常规的CSS不同,CSS模块中的类名是局部作用域的,不会与其他模块中的类名冲突。
/* styles.module.css */
.container {
background-color: #f0f0f0