styled-components--避免样式命名空间重复

1、安装依赖

yarn add styled-components

2、创建一个样式组件

//components/Wrapper.js
import styled from 'styled-components';
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color:#C0C342
`;
export default Title;

3、使用

//App.js
import React from 'react';
import Title from './components/Wrapper';
class App extends React.Component {
  render() {
    return (
      <div>
        <Title>react</Title>
      </div>
    )
  }
}
export default App;

4、嵌套

import styled from 'styled-components';
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color:#C0C342;
  .one{
      color:blue;
  }
  h4{
      color:red;
  }
  &:hover{
      color:green;
  }
`;
export default Title;