React样式冲突解决方案

App.js

import React from 'react'
import Hello from './components/Hello/Hello'
import Welcome from './components/Welcome/Welcome'
const {
      Component } = React

// 创建外壳组件
export default class App extends Component {
     
  render () {
     
    return (
      <div>
        <Hello />
        <Welcome />
      </div>
    )
  }
}

Hello.js

import React, {
      Component } from 'react'
import './Hello.css'

// 定义并且暴露Hello组件
export default class Hello extends Component {
     
  render () {
     
    return <h2 className="title">Hello React!</h2>
  }
}

Hello.css

.title {
     
  background: skyblue;
}

Welcome.jsx

import React, {
      Component } from 'react'
import './welcome.css'

export default class Welcome extends Component {
     
  render () {
     
    return <h2 className="welcome">Welcome</h2>
  }
}

welcome.css

.welcome {
     
  background: aquamarine;
}

效果：

如果我们修改一下Welcome的样式：


把welcome改成title

那么在App.js中，由于Welcome组件是后引入的，Welcome组件的title样式就会覆盖Hello组件的同名的title样式，所以两个组件背景色都是蓝色了

解决办法：

1.使用less或者sass嵌套语法写css,类似下面这样：

先修改Hello.css的文件名为Hello.module.css

再做如下修改：

效果：

这样就不会有样式冲突了

推荐使用第一种方式less或者sass嵌套写法