样式扩展

除了可以直接定义已包装样式的组件以外，Styled Components 还支持对已经包装了样式的组件进行扩展，建立新的组件。

const Button = styled.button`
  color: pick;
  padding: 0.25em 1em;
  border-radius: 4px;
`;

const RedButton = styled(Button)`
  color: red;
`;

Styled Components 还可以样式化任意组件，例如已经定义好样式的组件。

const Link = ({ className, children }) => <a className={className}>{children}</a>;

const StyledLink = styled(Link)`
  color: palevioletred;
`;

Styled Components 还提供了一个 css 方法，可以用来创建样式片段。样式片段可以作为 Mixin 混入其他的样式中。以下给出一个示例供参考。

import styled, { css } from 'styled-components';

const mixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`;

const Comp = styled.div`
  ${props => (props.complex ? mixin : 'color: blue;')};
`;