styled-components

1. styled-components：

目的： 增强react中css的表现
优点：
    避免标签中class name属性冲突；
    样式移除更加容易；
    动态修改css样式，不用定义不同的class name来定义不用样式；
    无痛维护；
    自动提供属性前缀，解决部分浏览器兼容问题；
    
在 render 方法之外定义 styled component 很重要, 不然 styled component 会在每个渲染过程中重新创建. 这将阻止缓存生效并且大大降低了渲染速度,所以尽量避免这种情况.

2. styled-components安装：

• npm install --save styled-components

3. 标记模板字符串设置样式

创建附加样式的react组件，移除了组件与样式之间的映射

   // 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  // 就像使用常规 React 组件一样使用 Title 和 Wrapper 
  render(
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );

4. 基于属性适配

props以插值的方式传递给组件已控制样式的显示

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.inputColor : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

5. 样式的继承

// 上一节创建的没有插值的 Button 组件
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 一个继承 Button 的新组件, 重载了一部分样式
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

6. 伪类，伪元素嵌套的书写

const Thing = styled.button`
  color: blue;
  ::before {
    content: '????';
  }
  :hover {
    color: red;
  }
  & ~ & {
    background: tomato;
  }

  & + & {
    background: lime; //
  }
`

render(
  <Thing>Hello world!</Thing>
)

7. 添加额外属性 调用.attrs()方法

  const Input = styled.input.attrs({
  type: "password",
  margin: props => props.size || "1em",
  padding: props => props.size || "1em"
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;

8. 动画

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

**9. **