我是ElementalUI的维护者之一,一个React组件库,我们已经在过去6-12个月中尝试了所有不同的造型方式. (！)你命名,我们试过了. (我谈到了我在ReactNL keynote期间和一些最流行的图书馆的经历,在那里他们分手)

问题是,目前的样式库都没有内置的支持.你可以使用大多数用户非常方便的方式来实现,但这不是您分发组件时所需要的,对吗？

这就是为什么我们构建了styled-components.样式组件有一堆有趣的属性,其中之一是将主题直接内置到库中,使其成为构建可分发组件的完美选择！

这是简短的解释,虽然我鼓励你通过我们的documentation这解释一切！

这就是样式组件的基本用法：

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组件,您可以像任何其他React组件一样创建主要组件：

<Button>Normal</Button>
<Button primary>Primary</Button>

现在来到主题方面.我们导出一个名为ThemeProvider的组件,您可以将主题传递给应用程序(或部分应用程序)并将其包装在：

import { ThemeProvider } from 'styled-components';

const theme = {
  main: 'mediumseagreen',};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <MyApp />
  </ThemeProvider>,myElem
);

现在,该ThemeProvider中的任何风格的组件,无论多么深刻的感谢上下文,将把这个主题注入道具.

这是一个可以推荐的按钮：

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… */
`;

现在你的按钮将采取它通过的主题,并根据它改变它的造型！ (您也可以通过defaultProps提供默认值)

这是风格组件的要点,以及如何帮助构建可分配的组件！

我们现在有一个WIP doc about writing third-party component libraries,我鼓励你检查,当然正常的文档也是一个很好的阅读.我们试图覆盖所有的基础,所以如果你看到任何你不喜欢的东西,或者你认为是缺失的,请立即让我们知道,我们将讨论！

如果您有关于样式组件的任何其他问题,请随时在这里回复或在Twitter上接触. (@mxstbr)