React样式冲突问题

  • Post author:
  • Post category:其他


前言:因为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;
    }
}



版权声明:本文为qq_45689385原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。