Styled Component

·  阅读 1017

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

Install

npm install --save styled-components

写法

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

const StyleDiv = styled.div`
  color: red;
`
复制代码

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

const StyledButton = styled.button`
  color: red;
`
复制代码

是不是通俗易懂简洁明了

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

用法

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

<StyledDiv></StyledDiv>

通过props控制CSS属性

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

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

比如:

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

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

style styled Component

如果你已经有一个styledComponent

例如:

const StyleDiv = styled.div`
  color: red;
`
复制代码

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

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

const newDiv = styled(StyleDiv)`
  background-color: red;
`
复制代码

重复使用

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

好了学CSS去了😭

分类:
前端
标签: