1-1styled-components

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

1.安装依赖

yarn add  styled-components

2.创建一个样式组件

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

3.使用

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;