带有 React 的 CSS 架构也可以被主题化

Question

我目前正在构建一个大型 React 应用程序。 css，从来都不是我的强项。但是现在 CSS 有了 sass/cssNext/React 的内联样式。我一直在将 BEM 与 sass 结合使用，但随着我的其他应用程序变得越来越庞大，甚至开始崩溃。特别是当您能够在主要配色方案等之外“重新设计”或“主题化”页面时。

那么——有人能告诉我一个行之有效的方法来创建带有反应的 css，它可以很好地扩展，并且当人们想借用我的组件时允许定制主题。例如，

<MyComponent />
// this component has its styles but lets say Joe Schmoe wants be import 
// it? But, Joe wants to overlay his custom styles?
// Is there a new paradigm that allows for an overlay or reskin within the component?

甚至是整个应用程序在某个时候都可以换肤的想法。我知道这是一个非常基本的问题，但每当我构建元素时，我的痛点似乎也是 CSS - 所以我想知道什么才是真正有效的。

Answer 1

直到最近，这在 React 世界中还没有解决。

我是 ElementalUI 的维护者之一，一个 React 组件库，在过去的 6-12 个月里，我们一直在尝试所有不同的样式设置方式。 (!) 你说出它的名字，我们已经尝试过了。 (我在 ReactNL keynote 期间谈到了我对一些最流行的库的体验以及它们崩溃的地方)

问题是当前的样式库都没有内置对主题的支持。您可以通过一种非常骇人听闻的、对用户不友好的方式使用其中的大多数，但这不是您分发组件时想要的，对吧？

---

这就是我们构建 styled-components 的原因. styled-components 有很多有趣的属性，其中之一就是主题直接内置到库中，使其成为构建可分发组件的完美选择!

这是简短的解释，但我鼓励您阅读我们的 documentation这解释了一切!

这是 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>

(如果您点击图片，您将看到一个现场 Playground )

当您将内插函数传递给标记的模板文字时，我们会将传递给组件的属性传递给您。这意味着你可以适应 Prop :

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 组件一样将其设为 primary:

<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 注入(inject)到 props 中。

这就是可主题化的 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 doc about writing third-party component libraries我鼓励您检查一下，当然，普通文档也很不错。我们已尝试涵盖所有基础内容，因此如果您发现任何不喜欢的内容或您认为遗漏的内容，请立即告诉我们，我们将进行讨论!

如果您对 styled-components 有任何其他问题，请随时在此处回复或在 Twitter 上联系。 ( @mxstbr )