react css多个变量_如何使用CSS变量和React上下文创建主题引擎

react css多个变量

CSS variables are really cool. You can use them for a lot of things, like applying themes in your application with ease.

CSS变量真的很棒。 您可以将它们用于很多事情，例如轻松地在应用程序中应用主题。

In this tutorial I'll show you how to integrate them with React to create a ThemeComponent (with context!).

在本教程中，我将向您展示如何将它们与React集成以创建ThemeComponent (带有上下文！)。

要点中CSS变量 (CSS Variables in a Gist)

So first of all, I'd like to explain briefly what CSS variables (or in their formal name - CSS custom properties) are, and how to use them.

因此，首先，我想简单地解释一下什么是CSS变量(或以它们的正式名称-CSS自定义属性)以及如何使用它们。

CSS variables are a way for us to define variables that will be applied throughout our application. The syntax is as follows:

CSS变量是我们定义将在整个应用程序中应用的变量的一种方式。 语法如下：

What happens here? Using the --{varName} notation we can tell our browser to store a unique variable called varName (or in the example above, primary), and then we can use it with the var(--{varName}) notation anywhere in our .css files.

发生什么事了？ 使用--{varName}表示法，我们可以告诉我们的浏览器存储一个称为varName的唯一变量(或者在上面的示例中，是primary )，然后可以将其与var(--{varName})表示法一起使用。 .css文件。

Does it seem really simple? That's because it is. There's not much to it. According to caniuse.com over 92% of users world wide use a browser that supports CSS variables (unless you really need IE support, in which case you're out of luck). So for the most part they're completely safe to use.

看起来真的很简单吗？ 那是因为。 没什么。 根据caniuse.com的说法， 全世界有超过92％的用户使用支持CSS变量的浏览器(除非您确实需要IE支持，否则就不走运了)。 因此，在大多数情况下，它们是完全安全的。

If you want to read more, you can find more information in the MDN page.

如果您想了解更多信息，可以在MDN页面上找到更多信息。