主题支持

Styled Components 提供了一个名为 ThemeProvider 的组件，其中可以通过 theme 属性设定一个对象作为主题描述。被 ThemeProvider 包裹的组件树中的组件的 props 中都会被注入一个名为 theme 的属性，其中内容为 ThemeProvider 中 theme 属性提供的内容，并且会随着 ThemeProvider 提供的内容变换而幻变化，从而达到更改主题的目的。

对于主题的使用可以参考以下示例。

const theme = {
  main: 'mediumseagreen'
};

const Button = styled.button`
  color: ${props => props.theme.main};
`;

function Form(props) {
  return (
    <div>
      <Button>No Theme</Button>
      <ThemeProvider theme={theme}>
        <Button>Themed</Button>
      </ThemeProvider>
    </div>
  );
}

所有已经样式化的组件的 props 都会被自动注入 theme 以获得主题的支持，但是没经过样式化的组件要想得到主题的支持，需要使用 Styled Components 提供的 withTheme() 方法进行包装。