2.styled-components解决命名重复

1.避免样式命名空间重复的问题

//1.安装依赖
yarn add styled-components

//2.新建一个样式组件components-style/Wrapper.js，导入依赖
import styled from 'styled-components';
const Title = styled.h1`     //样式
font-size:1.5em;
text-align:center;
color:red;
`
export default Title;

//3.在主组件中导入Title这个样式组件并使用
import Title from './components-style/Wrapper'
class App extends React.Component{
  render(){
    return(
      <div>
        <Title>react</Title>
      </div>
    )
  }
}

2-1嵌套

//Wrapper.js
import styled from 'styled-components';
const Title = styled.h1`
font-size:1.5em;
text-align:center;
color:red;
.one{
    color:pink;
}
h4{
    color:deeppink;
}
&:hover{
    color:yellow
}
`
//&表示的就是h1,就是最外层的元素，不用&也可以达到相同效果
export default Title;
//App.js
class App extends React.Component{
  render(){
    return(
      <div>
        <Title>react
          <p class="one">hello world</p>
          <h4>我喜欢react</h4>
        </Title>
      </div>
    )
  }
}