使用React的CSS架构也可以是主题

Question

我目前正在构建一个大型React应用。 Css，从未成为我的强项。但是现在CSS有了使用React的sass / cssNext / inline样式。我一直在使用BEM和sass，但是随着我的其他应用程序变得越来越大，甚至开始崩溃。特别是当你有能力重新打造皮肤时＃34;或＆＃34;主题＆＃34;主要配色方案之外的页面等。

所以 - 有人可以指出一种行之有效的方法来创建具有可以扩展的反应的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期间讨论了我与一些最受欢迎的图书馆的经历，以及他们在哪里发生故障）

问题是当前的样式库都没有内置的主题支持。你可以用非常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）

Answer 2

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

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

这是我如何构建组件。我的每个组件都有一个css文件，很容易维护或更改。

Less.js

这里是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>
  );
}

请注意，我有一个组件的className，它允许其他组件在按钮组件的类中传递。因此，当有人借用您的组件时，他们可以扩展或覆盖您的按钮样式。

如果您需要创建可自定义的网站，我还建议您使用this提供自定义网站的实时预览。