React引入两个组件,一个Hello、一个Welcom,并且Hello和Welcome中均有一个class名称为title的标签,如果不使用样式模块化,那么最终这两个组件的背景色会一样。
此时可以使用样式的模块化,首先将组件的样式改为xxx.module.css,然后在使用中更改样式赋值的方式
Hello/index.jsx中代码
import React,{Component} from 'react'
import hello from './index.module.css'
export default class Hello extends Component{
render(){
return(
<div className={hello.title}><h2>hello react</h2></div>
)
}
}
Hello/index.module.css中代码
.title{
background-color: orange;
}