[JavaScript知识库]React样式冲突问题

前言：因为react最终编译打包后都在一个html页面中，如果在两个组件中取一样类名分别引用在自身，那么后者会覆盖前者

例如 组件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;
}

两者会冲突，只会取其中一个

解决方法 一

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>
	}
}

方法 二?

可以在最外层写个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;
    }
}

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖