前言：因?yàn)閞eact最終編譯打包后都在一個(gè)html頁(yè)面中，如果在兩個(gè)組件中取一樣類名分別引用在自身，那么后者會(huì)覆蓋前者

例如 組件Hello

jsx:
import React,{Component} from 'react'
import './index.css'

export default class Hello extends Component{
	render(){
		return <h2 className={title}>Hello,React!</h2>
	}
}

css:
.title{
	background-color: orange;
}

組件Welcome

jsx:
import React,{Component} from 'react'
import './index.css'

export default class Welcome extends Component{
	render(){
		return <h2 className={title}>Hello,React!</h2>
	}
}

css:
.title{
	background-color: skyblue;
}

兩者會(huì)沖突，只會(huì)取其中一個(gè)

解決方法 一

css文件后綴前面加上module 例如 index.module.css

然后引入

import React,{Component} from 'react'
import hello from './index.module.css'

export default class Hello extends Component{
	render(){
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

方法 二?

可以在最外層寫個(gè)class類名，樣式嵌套寫法，可以使用less和sass

jsx:
import React,{Component} from 'react'
import hello from './index.css'

export default class Hello extends Component{
	render(){
		return (
            <div className={hello}>
                <h2 className={title}>Hello,React!</h2>
            </div>
        )
	}
}

css:
.hello{
   .title{
       background-color: orange;
    }
}