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嵌套写法