使用 CSS 变量设置 React 组件的主题_react css 变量-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_69810763/article/details/142263562

主题是构建用户界面的一个重要方面，它允许您自定义应用程序的外观以适应不同的风格和偏好。传统上，JavaScript 和 styled-components 等库一直是在 React 应用程序中实现主题的热门选择。然而，随着 CSS 自定义属性（也称为 CSS 变量）的出现，我们现在有了更高效、更通用的方法来处理主题。在本文中，我们将探讨如何使用 CSS 变量为 React 组件设置主题。

为什么要对主题使用 CSS 自定义属性？

在深入了解实现细节之前，让我们先了解为什么 CSS 自定义属性是 React 应用程序主题化的有力选择。

性能优化

使用 CSS 自定义属性的主要优势之一是性能提升。通过利用 CSS 进行样式设置而不是过度依赖 JavaScript，我们可以利用浏览器内置的 CSS 处理优化功能。与 JavaScript 相比，CSS 的处理和应用速度通常更快，从而实现更高效的渲染过程。通过减少 JavaScript 代码在样式设置中的参与，我们可以提高应用程序的整体性能。

通用代码更易于维护和扩展

可维护性和可扩展性是任何软件项目的关键因素。通过使用 CSS、HTML 和 JavaScript 等通用技术，我们可以使我们的 UI 组件更具可移植性和适应性。当大多数样式都使用纯 CSS 完成时，将 UI 组件从一个技术堆栈转换到另一个技术堆栈就变得更容易了。无论您是将代码库迁移到不同的技术堆栈还是使用不同的技术创建新的应用程序，使用纯 CSS 实现大多数样式都可以简化流程。这种灵活性可以更好地维护和扩展您的代码库。

方法论 #1：范围自定义 CSS 属性

我们将探讨的第一个方法是将自定义 CSS 属性的范围限定到各个组件，并通过替换组件的 className 来更改主题。这种方法可确保特定于主题的样式被组件的所有后代继承。

工作流

将所有可主题化的 CSS 属性定义为自定义 CSS 属性，而不是使用常量值。
为顶级组件分配一个主题 className，例如组件App。
通过替换顶级组件的 className 来更改主题，导致所有后代继承新的自定义 CSS 属性。

例子
让我们考虑一个想要更改 React 应用程序主题的示例。我们将创建一个Button可以根据主题具有不同颜色变化的组件。

首先，我们为主题定义自定义 CSS 属性：

:root { 
  --primary-color : 蓝色; 
  --secondary-color : 灰色; 
} 

.light-theme { 
  --primary-color : 绿色; 
  --secondary-color : 浅灰色; 
} 
.dark-theme { 
  --primary-color : 红色; 
  --secondary-color : 深灰色; 
}

接下来，我们创建Button组件并利用 CSS 变量进行主题设置：

import React from 'react';
import './Button.css';

const Button = ({ theme }) => {
  return (
    <button className={`button ${theme}`}>
      点击我
    </button>
  );
};

export default Button;

在上面的代码中，我们使用themeprop 来确定按钮元素的主题 className。该themeprop 可以从父组件传递过来，例如App组件。

现在，让我们看看如何通过替换组件的 className 来动态更改主题App：

import React, { useState } from 'react';
import Button from './Button';

const App = () => {
  const [theme, setTheme] = useState('light-theme');

  const changeTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light-theme' ? 'dark-theme' : 'light-theme'));
  };

  return (
    <div className={`app ${theme}`}>
      <h1>主题应用</h1>
      <Button theme={theme} />
      <button onClick={changeTheme}>更改主题</button>
    </div>
  );
};

export default App;

在App组件中，我们使用useState钩子来管理当前主题状态。该changeTheme函数通过更新主题状态在明暗主题之间切换。div 的 classNameapp是根据当前主题动态设置的。

当主题发生变化时，Button组件会自动通过CSS继承来继承新主题的自定义CSS属性。

方法 #2：设置 CSS 自定义属性

第二种方法涉及使用 CSS 变量来存储不同主题的值集。我们定义一组代表特定样式主题的“存储属性”，并使用 JavaScript 将“选定属性”替换为所需主题的值。

工作流

通过将 CSS 变量的值分配给默认主题的变量，将“选定的属性”设置为默认主题。
使用 CSS 变量将所有可主题化的 CSS 属性定义为“选定属性”。
使用 JavaScript 将“选定的属性”替换为与所需主题的“存储的属性”不同的一组值。

例子
让我们继续以组件为例Button，并应用第二种主题方法。

首先，我们为“选定属性”定义 CSS 变量：

：root { 
  --selected-primary-color：var（--light-primary-color）；
  --selected-secondary-color：var（--light-secondary-color）；

  --light-primary-color：蓝色；
  --light-secondary-color：灰色；

  --dark-primary-color：红色；
  --dark-secondary-color：darkgray；
} 

.button { 
   background颜色：var（--selected-primary-color）；
}

在此示例中，我们使用 CSS 变量来存储每个主题的主色和辅色。“选定属性”使用来引用这些变量var()。

接下来，我们创建Button组件并利用 CSS 变量进行主题设置：

import React from 'react';
import './Button.css';

const Button = () => {
  return (
    <button className="button">
      点击我
    </button>
  );
};

export default Button;

该Button组件不需要任何主题的道具，因为我们将在组件外部处理主题逻辑。

现在，让我们看看如何使用 JavaScript 动态更改主题：

import React, { useState, useEffect } from 'react';
import Button from './Button';

const App = () => {
  const [theme, setTheme] = useState('light-theme');

  const changeTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light-theme' ? 'dark-theme' : 'light-theme'));
  };

  const setThemeVariables = () => {
    const root = document.documentElement;
    if (theme === 'light-theme') {
      root.style.setProperty('--selected-primary-color', 'var(--light-primary-color)');
      root.style.setProperty('--selected-secondary-color', 'var(--light-secondary-color)');
    } else {
      root.style.setProperty('--selected-primary-color', 'var(--dark-primary-color)');
      root.style.setProperty('--selected-secondary-color', 'var(--dark-secondary-color)');
    }
  };

  // 每当主题改变时调用 setThemeVariables
  useEffect(() => {
    setThemeVariables();
  }, [theme]);

  return (
    <div className="app">
      <h1>主题应用</h1>
      <Button />
      <button onClick={changeTheme}>更改主题</button>
    </div>
  );
};

export default App;

在App组件中，我们使用useState钩子来管理当前主题状态。该changeTheme函数通过更新主题状态在明暗主题之间切换。

该setThemeVariables函数负责根据所选主题更新 CSS 变量。它使用该setProperty方法为 CSS 变量设置新值。每当使用钩子更改主题时，都会调用此函数useEffect。

通过动态更新 CSS 变量，Button组件和任何其他可主题化的组件将自动反映所选主题的变化。