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

Posted 2023-03-06

【中文标题】带有 React 的 CSS 架构，也可以主题化

【英文标题】：CSS architecture with React that also can be themed

【发布时间】：2017-04-13 01:18:12

【问题描述】：

我目前正在构建一个大型 React 应用程序。 CSS，从来都不是我的强项。但是现在 CSS 有了 React 的 sass / cssNext / inline 样式。我一直在将 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 ——所以我想知道什么是真正有效的。

【参考方案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>

（如果你点击图片，你会得到一个现场游乐场）

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

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)

【讨论】：

你如何用这个来设计你自己的自定义组件？只使用 div 包装器？

是的，我在每个更大的组件中使用了大量的样式组件。像这样： const Btn = styled.button` styles: here; ` const Button = (props) => return ( props.text );

如何解决组件中样式的实际耦合问题。例如，假设我所有的按钮现在都需要 5px 的半径，我必须进入所有按钮并手动更改它们。还是我看错了你的帖子？或者媒体查询，你如何使用它们？

这一切都只是 CSS，所以您实际上可以只使用媒体查询！ （见这里：github.com/styled-components/styled-components/blob/master/docs/…）如果你所有的按钮现在应该有一个 5 像素的边框半径，你进入你的 组件并将边框半径编辑为 5 像素——因为所有按钮都应该建立在这个组件上，这就是你需要做的！ ?

符合 eslint 点符号；最好写：this.state = name: 'React', theme: theme.light, ;

【参考方案2】：

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

css-modules 使您能够为每个 CSS 类创建一个具有全局唯一名称的本地范围标识符，并启用模块化和可重用的 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>
  );

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

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