Styled-Components的使用

什么是styled-components?

它是通过JavaScript改变CSS编写方式的解决方案之一，从根本上解决常规CSS编写的一些弊端。
通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。

安装：

npm install --save styled-components

入门：

创建组件：styled-components来写类似于CSS的代码

import styled from 'styled-components'

//声明组件
const Wrapper = styled.div`
    background: 'gray';
    padding: 10px;
`
const Title = styled.h1`
    font-size: 1.5rem;
    color: red
`
//react render函数
render(
  <Wrapper>
    <Title>
      Hello World
    </Title>
  </Wrapper>
);

塑造组件：二次修改组件样式

import styled from 'styled-components'

//声明组件
const Wrapper = styled.div`
    background: 'gray';
    padding: 10px;
`
const Title = styled.h1`
    font-size: 1.5rem;
    color: gray
`
//二次修改样式
const RedTitle = styled(Title)`
    color: red
`
//react render函数
render(
  <Wrapper>
    <Title>
      Hello World
    </Title>
    <RedTitle>
      China
    </RedTitle>
  </Wrapper>
);

props传递参数

styled-components可以用props接受参数，来显示不同的样式

import styled from 'styled-components'// 根据传递的bgColor设置背景
// 根据传递的red参数有无，显示对应的样式
const Button = styled.h1`
    font-size: 1.5rem;
    color: ${ props => props.red ? red ： blue};
    background: ${ props => props.bgColor || "blue" };
`//react render函数
render(
  <div>
      <Button bgColor= 'red' red>确定</Button>
  </div>);

扩展样式

import styled from 'styled-components'
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 = Button.extend`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

添加attr

我们可以使用attrsAPI来为样式组件添加一些attr属性，它们也可以通过标签模板插值函数拿到props传值。

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};
`;

render(
  <div>
    <Input placeholder="A small text input" size="1em" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);