基本使用方法

Styled Components 的基本使用方法是引入 styled 并使用其定义标签样式，将带样式的标签包装成组件来使用，以下是一个最简单的示例。

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

function Welcome(props) {
  return <Title>Welcome</Title>;
}

Styled Components 在这里使用了 ES6 的一个新语法——带标记的模板字符串。例如 fn 是一个函数，那么以下两种调用是等价的。

fn`some string`;
fn(['some string']);

如果模板字符串中使用了其他的变量，那么对于 fn 的调用就会变成以下这种等价形式。

const aVar = 'foo';

fn`the value is ${aVar} .`;
fn(['the value is ', ' .'], aVar);

示例中将 HTML 标签 h1 通过加入样式包裹成了一个新的标签 Title，然后在其他组件中直接进行了使用。Styled Components 将 ES6 中的模板字符串进化为了定义样式化组件的语法，模板字符串中的样式遵循样式预处理库 stylis 的规范。

Tip

样式预处理库 stylis 采用类似于 SCSS 的语法结构。

定义 HTML 标签样式的格式为 styled.tag，而定义 React 组件样式的格式为 styled(Component)。无论对哪种标签或者组件进行包装，都会返回一个样式化的组件（StyledComponent）。

Styled Components 中还可以直接使用 props 来动态变换组件样式，例如以下示例。

const Button = styled.button`
  background: ${props => (props.primary ? 'pink' : 'white')};
`;

function Buttons(props) {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}

Styled Components 可以根据传入组件的 props 中的内容动态修改组件的样式。如果被包装的组件是简单的 HTML 标签，那么 Styled Components 将传递任何已知的 HTML 属性给 DOM。如果被包装的组件是 React 组件，那么 Styled Components 会将全部 props 内容传递给被包装的组件。所以包装好的组件也同样可以像一般组件那样使用React提供的各种事件。

同样的，对Styled Components组件使用ref，也同样会将组件的底层元素传递给父组件。如果底层元素是一个HTML元素，那么父组件中的Ref获得的就是这个HTML DOM元素，如果底层元素是一个React组件，那么父组件中的Ref获得的就是这个组件。所以在对Styled Components组件使用Ref时，需要仔细注意其底层元素的类型。

Live with React

基本使用方法