直到最近，这在 React 世界中还没有解决。
我是ElementalUI（一个 React 组件库）的维护者之一，在过去的 6-12 个月里，我们一直在尝试所有不同的样式设置方式。（！）你的名字，我们已经尝试过了。（我在ReactNL 主题演讲中谈到了我对一些最受欢迎的库的体验以及它们在哪里崩溃）
问题是当前的样式库都没有对主题的内置支持。你可以用一种非常hacky、非用户友好的方式来处理它们中的大多数，但这不是你分发组件时想要的，对吧？
这就是我们构建styled-components. styled-components有很多有趣的属性，其中一个是主题直接内置到库中，使其成为构建可分发组件的完美选择！
这是简短的解释，但我鼓励您仔细阅读我们解释所有内容的文档！
这就是 的基本用法styled-components：
import React from 'react';
import styled from 'styled-components';
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
这个变量 ,Wrapper现在是你可以渲染的 React 组件：
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
（如果你点击图片，你会得到一个现场游乐场）
当您将插值函数传递给标记模板文字时，我们会将传递给组件的属性传递给您。这意味着您可以适应道具：
import styled from 'styled-components';
const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
在这里，我们创建了一个Button组件，您可以primary像其他任何 React 组件一样制作它：
<Button>Normal</Button>
<Button primary>Primary</Button>
现在是主题方面。我们导出一个名为的组件ThemeProvider，您可以将其传递theme给并将您的应用程序（或应用程序的一部分）包装在：
import { ThemeProvider } from 'styled-components';
const theme = {
main: 'mediumseagreen',
};
ReactDOM.render(
<ThemeProvider theme={theme}>
<MyApp />
</ThemeProvider>,
myElem
);
现在，其中的任何样式组件ThemeProvider，无论多亏了上下文，都会将其theme注入到道具中。
这是一个主题的Button样子：
import styled from 'styled-components';
const Button = styled.button`
/* Color the background and border with theme.main */
background: ${props => props.theme.main};
border: 2px solid ${props => props.theme.main};
/* …more styles here… */
`;
现在你Button会接受theme它通过并基于它改变它的样式！（您也可以通过提供默认值defaultProps）
这就是构建可分发组件的要点styled-components以及它如何帮助构建！
我们目前有一个关于编写第三方组件库的 WIP 文档，我鼓励您查看它，当然，普通文档也值得一读。我们已尝试涵盖所有基础，因此，如果您发现任何您不喜欢或您认为缺少的内容，请立即告诉我们，我们将进行讨论！
如果您有任何其他问题，请styled-components随时在此处回复或在 Twitter 上联系。( @mxstbr )
