使用 CSS 自定义属性对 styled-components 进行主题化

CSS 自定义属性

CSS 自定义属性 vs styled-components props

styled-components 全局样式

主题

奖励：过渡主题变化

响应式 CSS 属性

最近，我从 Vue 迁移到了 React（更多信息请见这里）。之前用 Vue 的时候，我习惯用老式的 style 标签写纯 CSS。现在迁移到 React 之后，我想体验一下不同的风格，所以决定尝试一下styled-components。说实话，到目前为止，我非常喜欢它。它有助于保持可维护的样式，易于重构和扩展。唯一的缺点是，如果过度使用 props 系统，样式可能会变得混乱，可读性下降。这正是我喜欢 CSS 自定义属性（变量）的原因，它们可以帮助你保持 CSS 的简洁，尤其是在主题设置方面！

CSS 自定义属性

它就像你所知道的任何其他变量系统一样

CSS 自定义属性通常称为 CSS 变量，包含可在整个应用程序中重复使用的值。它就像您所知的任何其他变量系统一样。94.75% 的浏览器市场份额都支持它们，因此甚至可以投入生产。
定义自定义属性就像设置 CSS 属性一样，唯一的区别是您需要在前面加上--。

:root {
  --theme-primary: #F5005E;
}

在上面的例子中，我初始化了一个名为 的新自定义属性，theme-primary并将其值设置为#151618。:root伪类用于确保新的自定义属性在整个文档中可用，而不仅仅是在特定范围内。
现在要使用theme-primary，我们可以使用 CSS 函数var。让我们看看实际效果：

要了解更多信息，请查看 MDN 文档。

CSS 自定义属性 vs styled-components props

CSS 自定义属性将使你的代码保持干净和可读性，而 styled-components 属性则更加灵活

你已经了解了什么是 CSS 自定义属性。但是 styled-components 也有一个 props 系统。那么，我们该如何选择更适合自己的呢？简而言之：CSS 自定义属性可以让你的代码更简洁易读，而 styled-components 的 props 则更加灵活。让我们深入探讨一下。

一方面，我们拥有 CSS 自定义属性，它为您提供所有开箱即用的 CSS 功能。变量会自动传递给下游子元素，您可以使用更具体的规则覆盖它们，并像其他 CSS 属性一样动态更改它们。样式仍然保持简洁优雅（稍后会详细介绍）。但归根结底，它们只是字符串，您无法用它们做任何花哨的事情。

另一方面，styled-components 的 props 充分利用了 JavaScript 的强大功能。你可以像使用其他 JavaScript 变量一样使用它们，并相应地更改样式。你可以响应用户事件，根据 React 组件的 props 设置值，进行验证，设置类型，以及几乎所有操作。问题在于，使用 props 的样式更难阅读，最终的打包文件也会更大。

主题属性通常是静态设置的，几乎可以被应用中的任何组件访问。这为 CSS 自定义属性提供了一个完美的用例。主题的传递对我们来说是免费的，无需验证或应用任何复杂的规则。

styled-components 全局样式

styled-components 专注于创建具有作用域样式的组件。但有时，我们需要将全局样式应用于所有组件。例如，如果我们想要重置浏览器的默认样式，或者在本例中需要应用全局主题。
出于这个特定原因，我们可以使用辅助函数createGlobalStyle。让我们更新之前的示例，以使用 styled-components 和createGlobalStyle。

主题

我们快完成了，这是整个流程的最后一步。在这里，我们将整合所学知识，为我们的 React 应用创建一个可维护的主题系统。
要创建主题，我们需要多次设置相同的 CSS 自定义属性，并使用不同的值。例如，假设我们有一个深色主题（默认主题）和一个浅色主题。深色主题的值将在:root伪元素中设置为默认值，而浅色主题的值可以在 中设置html.light。如果 html 元素的 light 类被启用，它将覆盖默认值。

让我们看看它的实际效果！

看看这有多简单！自定义属性一旦更改，就会自动传播到每个组件。

为了比较，我使用 styled-components 内置解决方案创建了相同的演示。（更多信息请点击此处）

在我看来，这种实现有两个缺点。首先，由于涉及太多字符串插值，我觉得它的可读性和优雅性较差。其次，由于 styled-components 会为 prop 的每个值创建一个类，因此输出包会比较大。如果你在切换主题时打开 DevTools，你会看到按钮类发生了变化。

最终，由你来决定你更喜欢哪种解决方案。没有对错之分。

奖励：过渡主题变化

您已经完成了这么多，所以这是一份很棒的奖励。UI 变化的过渡总是越平滑越好，主题也是如此。我们只需在切换主题时添加过渡效果即可。这将确保每个属性都平滑过渡。请谨慎使用，因为在某些情况下可能会导致性能问题。

就这样！很高兴你看完了。告诉我你的想法

每日在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质来源，助您掌控未来。