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页面上找到更多信息。

从JavaScript设置CSS变量 (Setting CSS Variables from JavaScript)

Setting and using CSS variables from JavaScript is just as easy as setting and using them in CSS. To get a value defined on an element:

从JavaScript设置和使用CSS变量就像在CSS中设置和使用变量一样容易。 要获取在元素上定义的值：

const primary = getComputedStyle(element).getPropertyValue("--primary");

Will give us the value of the primary custom CSS property defined for the element.

将为我们提供为element定义的primary自定义CSS属性的值。

Setting a custom CSS property works like so:

设置自定义CSS属性的方式如下：

element.style.setProperty("--light", "#5cd2b6");

Or, if we want to set the property for the entire application, we can do:

或者，如果我们要为整个应用程序设置属性，则可以执行以下操作：

document.documentElement.style.setProperty("--light", "#5cd2b6");

And now the light property will be accessible to all of our code.

现在，我们所有的代码都可以访问light属性。

实质性React上下文 (React Context in a Gist)

The React Context API is the only way provided by React to pass props indirectly from one component to a descendent component.

React Context API是React提供的唯一将prop从一个组件间接传递给后代组件的方法。

In this guide I'll use the useContext hook, which you can read more about here. But the principle is the same with class components.

在本指南中，我将使用useContext挂钩，您可以在这里信息。 但是原理与类组件相同。

First, we must initialize a context object:

首先，我们必须初始化一个上下文对象：

import React from "react";export const ThemeSelectorContext = React.createContext({themeName: "dark"
});

The parameters passed to the React.createContext function are the default parameters of the context. Now that we have a context object, we can use it to "inject" props to our indirect descendants:

传递给React.createContext函数的参数是上下文的默认参数。 现在我们有了一个上下文对象，我们可以使用它来将道具“注入”到我们的间接后代中：

export default ({ children }) => (<ThemeSelectorContext.Provider value={{ themeName: "dark" }}>{children}</ThemeSelectorContext.Provider>
);

And now anyone who wants to read the values in our context can do it:

现在，任何想要在我们的上下文中读取值的人都可以做到：

import React, { useContext } from "react";import { ThemeSelectorContext } from "./themer";export default () => {const { themeName } = useContext(ThemeSelectorContext);return <div>My theme is {themeName}</div>;
};

A Voilà! No matter where in the component hierarchy our component lies, it has access to the themeName variable. If we want to allow editing the value in our context, we can pass a function like so:

一个Voilà！ 无论我们的组件位于组件层次结构中的哪个位置，它都可以访问themeName变量。 如果要允许在上下文中编辑值，则可以传递如下函数：

export default ({ children }) => {const [themeName, setThemeName] = useState("dark");const toggleTheme = () => {themeName === "dark" ? setThemeName("light") : setThemeName("dark");};return (<ThemeSelectorContext.Provider value={{ themeName, toggleTheme }}>{children}</ThemeSelectorContext.Provider>);
};

And to use it:

并使用它：

import React, { useContext } from "react";import { ThemeSelectorContext } from "./themer";export default () => {const { themeName, toggleTheme } = useContext(ThemeSelectorContext);return (<><div>My theme is {themeName}</div><button onClick={toggleTheme}>Change Theme!</button></>);
};

That's enough for our needs, but if you want you can further read on the Official React Context Documentation.

这足以满足我们的需求，但是如果您愿意，可以进一步阅读Official React Context Documentation 。

放在一起 (Putting Everything Together)

Now that we know how to set CSS custom properties from JavaScript, and we can pass props down our component tree, we can make a really nice and simple "theme engine" for our application. First up we'll define our themes:

现在，我们知道如何从JavaScript设置CSS自定义属性，并且可以将props传递到组件树下，我们可以为应用程序创建一个非常漂亮且简单的“主题引擎”。 首先，我们将定义主题：

const themes = {dark: {primary: "#1ca086",separatorColor: "rgba(255,255,255,0.20)",textColor: "white",backgroundColor: "#121212",headerBackgroundColor: "rgba(255,255,255,0.05)",blockquoteColor: "rgba(255,255,255,0.20)",icon: "white"},light: {primary: "#1ca086",separatorColor: "rgba(0,0,0,0.08)",textColor: "black",backgroundColor: "white",headerBackgroundColor: "#f6f6f6",blockquoteColor: "rgba(0,0,0,0.80)",icon: "#121212"}
};

This just happens to be the color pallette I use for my blog, but really the sky is the limit when it comes to themes, so feel free to experiment.

这恰好是我在博客中使用的彩色调色板，但实际上在主题方面，天空是极限，所以请随时尝试。

Now we create our ThemeSelectorContext:

现在，我们创建ThemeSelectorContext ：

export const ThemeSelectorContext = React.createContext({themeName: "dark",toggleTheme: () => {}
});

And our theme component:

还有我们的主题组件：

export default ({ children }) => {const [themeName, setThemeName] = useState("dark");const [theme, setTheme] = useState(themes[themeName]);const toggleTheme = () => {if (theme === themes.dark) {setTheme(themes.light);setThemeName("light");} else {setTheme(themes.dark);setThemeName("dark");}};return (<ThemeSelectorContext.Provider value={{ toggleTheme, themeName }}>{children}</ThemeSelectorContext.Provider>);
};

In this component we store our selected theme object, and the selected theme name, and we defined a function to toggle our selected theme.

在此组件中，我们存储选定的主题对象和选定的主题名称，并定义了一个函数来切换选定的主题。

The last bit left is actually setting the CSS custom properties from our theme. We can easily do it using the .style.setProperty API:

最后剩下的实际上是从我们的主题设置CSS自定义属性。 我们可以使用.style.setProperty API轻松完成此操作：

const setCSSVariables = theme => {for (const value in theme) {document.documentElement.style.setProperty(`--${value}`, theme[value]);}
};

Now for each value in our theme object we can access a CSS property with the same name (prefixed with -- of course). The last thing we need is to run the setCSSVariables function every time the theme is toggled. So in our Theme component we can use the useEffect hook like so:

现在，对于theme对象中的每个值，我们可以访问具有相同名称CSS属性(当然，前缀为-- )。 我们需要做的最后一件事是每次切换主题时都运行setCSSVariables函数。 因此，在我们的Theme组件中，我们可以像这样使用useEffect钩子：

export default ({ children }) => {// code...useEffect(() => {setCSSVariables(theme);});// code...
};

The full source code can be found on github.

完整的源代码可以在github上找到。

Using our theme is super convenient:

使用我们的主题非常方便：

.title {color: var(--primary);
}

And updating our theme is just as easy:

并且更新主题同样容易：

import Toggle from "react-toggle";export default () => {const { toggleTheme, themeName } = useContext(ThemeSelectorContext);return <Toggle defaultChecked={themeName === "dark"} onClick={toggleTheme} />;
};

For this example I'm using the Toggle component from react-toggle, but any toggle/button component would do just fine. Clicking the Toggle will call the toggleTheme function, and will update our theme for the entire app, no more configuration needed.

对于此示例，我使用了react-toggle的Toggle组件，但是任何toggle / button组件都可以。 单击“ Toggle将调用toggleTheme函数，并将更新整个应用程序的主题，无需进行其他配置。

That's it! That's all you need to do to create a super simple, super clean theme engine for your application. If you want to see a real live example, you can check out the source code of my blog.

而已！ 这就是为您的应用程序创建超级简单，超级干净的主题引擎所需要做的一切。 如果您想看一个真实的例子，可以查看我博客的源代码 。

Thank you for reading!

感谢您的阅读！

This article was previously published on my blog: dorshinar.me. If you want to read more content, you can check my blog as it would mean a lot to me.

该文章先前已发布在我的博客dorshinar.me上 。 如果您想内容，可以查看我的博客，因为这对我来说意义重大。

翻译自: https://www.freecodecamp.org/news/themes-using-css-variables-and-react-context/

react css多个变量