css 自定义样式_使用CSS自定义属性对样式化的组件进行主题设置

css 自定义样式

Recently, I made the transition from Vue to React (more about it here). With Vue, I used to write pure CSS in the old-school style tag. Now with the transition to React, I wanted to experience something different, so I decided to give styled-components a try. Honestly, so far I love it. It helps to keep a maintainable styling which is both easy to refactor and expand. The only downside is that if you overuse their props system, your styling can become less readable and messy. This is exactly why I love CSS custom properties (variables), they help you to keep your CSS clean and neat, especially when it comes to theming!

最近，我进行了从Vue到React的过渡( 在此处了解更多信息)。 使用Vue，我曾经用老式的样式标签编写纯CSS。 现在向React过渡时，我想体验一下与众不同的东西，所以我决定尝试一下样式化组件 。 老实说，到目前为止，我喜欢它。 它有助于保持易于重构和扩展的可维护样式。 唯一的缺点是，如果您过度使用他们的道具系统，您的样式可能会变得不那么可读和混乱。 这正是我喜欢CSS自定义属性(变量)的原因，它们可以帮助您保持CSS整洁，尤其是在主题化方面！

CSS自定义属性 (CSS custom properties)

It’s just like any other variable system you know

就像您知道的任何其他变量系统一样

CSS custom properties often called CSS variables, contain values that can be reused throughout the application. It’s just like any other variable system you know. They are supported on 94.75% of the browser market share, so it’s even production-ready.

CSS定制属性通常称为CSS变量，包含可在整个应用程序中重复使用的值。 就像您知道的任何其他变量系统一样。 它们在94.75％的浏览器市场份额上得到支持，因此甚至可以投入生产。

Defining a custom property is like setting a CSS attribute the only difference is that you need to prefix with --.

定义自定义属性就像设置CSS属性一样，唯一的区别是您需要以--为前缀。

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

In the example above, I initialized a new custom property called theme-primary and set its value to #151618. The :root pseudo-class is used to make sure the new custom property is available throughout our document and not just in a specific scope.Now to use theme-primary, we can use the CSS function var. Let's see in action:

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

演示地址

To read more, check out MDN docs.

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

CSS定制属性vs样式化组件props (CSS custom properties vs styled-components props)

CSS custom properties will keep your code clean and readable while styled-components props are much more flexible

CSS自定义属性将使您的代码保持干净和可读性，而样式化组件的支持则更加灵活

You already get a grasp of what CSS custom properties are. But styled-components has a props system as well. So how can we decide which one is better for us? The short answer: CSS custom properties will keep your code clean and readable while styled-components props are much more flexible. Let’s dive into it.

您已经了解了什么是CSS自定义属性。 但是样式化组件也具有道具系统。 那么，我们如何才能确定哪个更适合我们呢？ 简短的答案：CSS定制属性将使您的代码保持干净和可读性，而样式化组件道具则更加灵活。 让我们开始吧。

On one side, we have CSS custom properties, that gives you all the CSS features out-of-the-box. Variables are automatically passed downstream to children elements, you can override them with more specific rules and change them dynamically just like any other CSS attribute. The styling also remains neat and elegant (more on this later). But at the end of the day, they’re just strings you can’t do anything fancy with them.

一方面，我们具有CSS自定义属性，可为您提供所有现成CSS功能。 变量会自动向下游传递给子元素，您可以使用更特定的规则覆盖它们，并像其他任何CSS属性一样动态地对其进行更改。 样式也保持整洁和优雅(稍后会详细介绍)。 但归根结底，它们只是字符串，您无法对其进行任何幻想。

On the other side, styled-components props wield the power of JavaScript. You can use them like any other JavaScript variable and change the style accordingly. You can react to user events, set the value according to the React component props, validate, set types, and basically everything. The problem is that it’s much harder to read a style that uses props and the final bundle will be bigger.

另一方面，带样式的组件道具则具有JavaScript的功能。 您可以像使用其他任何JavaScript变量一样使用它们，并相应地更改样式。 您可以对用户事件做出React，根据React组件的属性设置值，验证，设置类型，以及基本上所有内容。 问题在于阅读使用道具的样式要困难得多，而最终的捆绑包会更大。

Theme properties are usually statically set and are accessed by almost any component in the app. It makes a perfect use case for the CSS custom properties. Passing around the theme is something that we get for free and we don’t need to validate or apply any complex rules on them.

主题属性通常是静态设置的，几乎可以由应用程序中的任何组件访问。 它是CSS自定义属性的完美用例。 传递主题是我们免费获得的，我们不需要验证主题或对其应用任何复杂的规则。

样式化组件的全局样式 (styled-components global style)

styled-components is focused on creating components with scoped styling. But sometimes, we need to apply global styling to all our components. For example, if we want to reset the browser’s default styling or in our case if we need to apply a global theme.For this specific reason, we can use the helper function createGlobalStyle. Let's update our previous example to use styled-components and createGlobalStyle.

styled-components专注于创建具有范围样式的组件。 但是有时候，我们需要对所有组件应用全局样式。 例如，如果要重置浏览器的默认样式，或者需要应用全局主题，则可以使用帮助器函数createGlobalStyle 。 让我们更新前面的示例以使用styled-components和createGlobalStyle 。

演示地址

主题化 (Theming)

We’re almost done, this is the final step in the process. Here we will integrate everything we learned to create a maintainable theme system for our React application.To create the themes we need to set the same CSS custom properties multiple times with different values. So for example, let’s say we have a dark theme (our default) and a light theme. The dark values will be set in the :root pseudo-element as default, and the light values can be set in html.light. It will override the default values in case the html element has the light class toggled on.

我们差不多完成了，这是该过程的最后一步。 在这里，我们将整合我们学到的所有知识，以便为React应用程序创建一个可维护的主题系统。要创建主题，我们需要使用相同的值多次设置相同CSS自定义属性。 举例来说，假设我们有一个深色主题(我们的默认设置)和一个浅色主题。 暗值将默认设置为:root伪元素，而暗值可设置为html.light 。 万一html元素启用了light类，它将覆盖默认值。

Let’s see it in action!

让我们看看它的作用！

演示地址

Look how easy it is! Once the custom properties are changed, it’s automatically propagated down to every component.

看看这有多容易！ 自定义属性更改后，它将自动向下传播到每个组件。

For comparison purposes, I created the same demo with styled-components built-in solution. (For more info click here)

为了进行比较，我使用内置样式组件的解决方案创建了相同的演示。 (有关更多信息， 请单击此处 )

演示地址

There are two cons to this implementation, in my opinion. First, I find it less readable and elegant solution as it involves too much string interpolations. Second, the output bundle is larger as styled-components create a class for each value of the prop. If you open the DevTools while toggling the theme you will see the button class changes.

我认为此实现有两个缺点。 首先，我发现它的可读性和优雅度较低，因为它涉及过多的字符串插值。 其次，随着样式化组件为prop的每个值创建一个类，输出包更大。 如果在切换主题时打开DevTools，您将看到按钮类更改。

At the end of the day, it’s up to you to decide which solution you like more. There is no right or wrong.

归根结底，您可以决定自己更喜欢哪种解决方案。 没有对与错。

奖金：过渡主题变化 (BONUS: Transitioning the theme change)

You made it so far, so here’s a nice reward. It’s always better to transition smoothly UI changes and it’s true for themes as well. All we have to do is upon toggle the theme to add a transition. This will make sure every attribute is smoothly transitioned. Please use it with care as it may cause performance issues in some cases.

到目前为止，您已经做到了，所以这是个不错的奖励。 平稳过渡UI更改总是更好，主题也是如此。 我们要做的就是切换主题以添加过渡。 这将确保每个属性都平滑过渡。 请谨慎使用，因为在某些情况下可能会导致性能问题。

演示地址

And that’s all! I’m glad you made it through. Let me know what you think in the comments below 👇

就这样！ 我很高兴你能成功。 在下面的评论中让我知道您的想法👇

This guest post is presented with ❤️ to the gitconnected community in collaboration with daily.dev. daily.dev delivers the best programming news every new tab. It will rank hundreds of qualified sources for you so that you can hack the future.

这个客户后呈现❤️到 gitconnected 社区与合作 daily.dev 。 daily.dev在每个新选项卡上均提供最佳的编程新闻。 它将为您排列数百个合格的资源，以便您可以驾驭未来。

翻译自: https://levelup.gitconnected.com/theming-styled-components-with-css-custom-properties-e60050237741

css 自定义样式