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

Question

我目前正在构建一个大型 React 应用程序。 Css，从来都不是我的强项。但是现在 CSS 有 sass / cssNext / React 内联样式。我一直在使用 sass 的 BEM，但随着我的其他应用程序变得越来越大，甚至开始崩溃。特别是当你有能力 "re-skin" 或 "theme" 主要配色方案之外的页面等时..

所以——有人能告诉我一个行之有效的方法来创建 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

我不知道什么是最好的方法。我认为这更像是个人喜好。我将只分享我正在使用的工具。我用的是css-modules with postcss。

css-modules 使您能够为每个 CSS classes 创建具有全局唯一名称的局部范围标识符，并启用模块化和可重用CSS！您还可以使用 postcss-modules-values 创建包含所有设置变量的全局设置文件。这样您就可以更改网站的主题了。

以下是我构建组件的方式。我的每个组件都有一个 css 文件，非常容易维护或更改。

这是 Button 组件的代码。

function Button(props) {
  const className = props.className ? `${styles.button} ${props.className}` : styles.button;

  return (
    <button disabled={props.disabled} className={`${className}`} type="button" onClick={props.onClick}>
      {Children.toArray(props.children)}
    </button>
  );
}

请注意，我有一个组件的 class 名称，它允许其他组件传入按钮组件的 class。这样当有人借用您的组件时，他们可以扩展或覆盖您的按钮样式。

如果你需要创建自定义网站，我也推荐使用Less.js，它提供了自定义网站的实时预览。

Answer 2

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

我是 ElementalUI, a React component library, and we've been trying out all the different ways of styling for the past 6-12 months. (!) You name it, we've tried it. (I talked about my experiences with some of the most popular libraries during my ReactNL keynote 的维护者之一，他们在那里崩溃了）

问题是 none 当前的样式库完全内置了对主题的支持。你可以用一种非常 hacky、非用户友好的方式使用它们中的大多数来做到这一点，但这不是你分发组件时想要的，对吧？

这就是我们构建 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>

（如果您点击图片，您将获得一个现场游乐场）

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

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 注入道具中。

这就是主题化 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)

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

CSS architecture with React that also can be themed

css

sass

reactjs

postcss

cssnext