Styled Component

终于有一天，伟大的程序员们把CSS跟React搞到了一起

npm install --save styled-components

如果要写一个有样式的div，那就

const StyleDiv = styled.div`
  color: red;
`

如果要写一个有样式的button，那就

const StyledButton = styled.button`
  color: red;
`

是不是通俗易懂简洁明了

想加什么样式就加什么样式，想加动画也不是不行

写完了用的时候也就直接跟普通的组件一样使用

<StyledDiv></StyledDiv>

这么看好像确实没有什么比较非要把CSS跟React搞在一起，但是

他竟然还可以跟props作用在一起来控制component的样式

比如：

StyledButton组件有一个active的属性，我们需要根据active来控制组件的背景色，就可以这么操作了

const StyledButton = styled.button`
  background-color:  ${props => (props.active ? '#ED2924' : '#E6E6E6')};
`;

如果你已经有一个styledComponent

例如：

const StyleDiv = styled.div`
  color: red;
`

你还可以在这个基础上载加工

但是这个时候就不是style.StyleDiv了而是要styled(StyleDiv)

const newDiv = styled(StyleDiv)`
  background-color: red;
`

如果有很多基本的样式需要重复使用的话，也可以在自己当前的项目当中创建theme，定义常用的size，color其他的等等怎么好看怎么来