Styled-component 入门使用（一）

styled-components 优点

1. 自动引入关键：styled-components可以跟踪哪些组件在页面上呈现，并注入其样式。可以实现加载所需的最小代码
2. 不会产生类名冲突：styled-components生成唯一的类名称。
3. CSS的更容易删除：在css中很难知道是否在代码库中某个地方使用了类名。styled-components能轻松的检测。如果该组件未使用并被删除，则其所有样式都将被删除。
4. 简单的动态样式：根据其props参数或全局主题调整组件的样式，而无需手动管理数十个class。
5. 毫无痛苦的维护：不必在不同的文件上寻找影响组件的样式，维护都是小菜一碟。
6. 自动提供前缀：按标准写style，让styled-components处理其余部分。

安装

# with npm
npm install --save styled-components
# with yarn
yarn add styled-components

（VS推荐插件vscode-styled-components

用法

基本

const Title = styled.h1`
  font-size: 1.5em;
  color: red;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
    <Title>
      Hello World!
    </Title>
);

传递参数

const Button = styled.button`
	 color:${props=>props.color?props.color:'blue'};
	background:${props=>props.primaty?'red':'yellow'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button color={'green'}>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

继承样式（在原有样式上修改

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
font-size:2em
`

render(
  <div>
    <Button>Normal Button</Button>
<Button as='a' herf="#">Normal Button as a tag</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

包装任意组件

const Link = ({ className, children }) => (
 <button className={className}>1234</button> // 注意要引入className
);

const StyleButton = styled(Link)`
color:red;
font-size:18px;
`

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyleButton/>
  </div>
);

伪元素(使用&代替父元素

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red; 
  }

`

render(
  <React.Fragment>
    <Thing>Hello world!</Thing>
  </React.Fragment>
	)

使用.attr来传递参数

const Input = styled.input.attrs(props => ({
  size: props.size || "1em", // 初始化参数
}))`

  padding: ${props => props.size};
`;

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

使用动画

const rotate = keyframes` // 使用keyframes关键字
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Rotate = styled.div`

  animation: ${rotate} 2s linear infinite;

`;

render(
  <Rotate>JSS</Rotate>
);

实践仓库

https://github.com/withspectrum/spectrum/blob/alpha/src/components/avatar/style.js