当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 SCSS 和 Redux 在 React 中创建主题系统

使用 SCSS 和 Redux 在 React 中创建主题系统

来源：dev.to 2024-11-11 12:01:11 0浏览收藏

你在学习文章相关的知识吗？本文《使用 SCSS 和 Redux 在 React 中创建主题系统》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

您是否曾经想开发一个具有多个主题的应用程序，但不知道如何去做？有很多方法

安装依赖项

让我们开始安装我们需要的一切。为此，我们需要 scss 和 redux：

yarn add sass
yarn add @reduxjs/toolkit

只需运行此脚本即可安装您需要的所有内容，并允许我们开始。

第 1 部分：设置

社会保障体系

让我们首先创建一个 theme.scss 文件夹，它实际上不会保存我们的主题，而是保存所有 sass 变量，我们将其设置为 css 变量。

这是我们的 theme.scss 文件的代码：

$bg1: var(--bg1);
$bg2: var(--bg2);
$bg3: var(--bg3);
$bg4: var(--bg4);
$ui1: var(--ui1);
$ui2: var(--ui2);
$ui3: var(--ui3);
$ui4: var(--ui4);
$h1: var(--h1);
$h2: var(--h2);
$p1: var(--p1);
$p2: var(--p2);
$border-rad: var(--border-rad);
$border-clr: var(--border-clr);
$font: var(--font);//etc...

这只是我的示例的一些起始变量，但这是前提。
现在，对于每个 .scss 文件，我们需要使用 @use "/path/to/theme";
包含此 theme.scss 文件在这里，我为 index.scss 创建了一些基本代码，以向所有元素添加简单的基本样式，例如框大小，并覆盖大多数默认边距/填充：

@use "theme";
//--------------------
html * {
  box-sizing: border-box;
  margin: none;
  padding: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: theme.$font;
}

主题

现在让我们从主题开始。首先，在名为主题的新目录中创建一个文件。之后您可以制作更多，但在本教程中我只会制作 2 个（深色和浅色）。您可以随时扩展这些主题/想法，我完全鼓励您进行实验。

这是基本模板（这将是我的深色主题）：

@import url('https://fonts.cdnfonts.com/css/br-segma');
.dark {
  --bg1: #202020;
  --bg2: #171717;
  --bg3: #131313;
  --bg4: #101010;
  --ui1: #252525;
  --ui2: #303030;
  --ui3: #353535;
  --ui4: #404040;
  --h1: #f5f5f5;
  --h2: #f0f0f0;
  --p1: #e0e0e0;
  --p2: #d5d5d5;
  --active: #671dc9;
  --active2: #1b1fec;
  --border-rad: 10px;
  --border-clr: #45454590;
  --font: "",sans-serif;
  --color-scheme: dark;
}

如果你想知道的话，这是我的观点：

@import url('https://fonts.cdnfonts.com/css/br-segma');
.light {
  --bg1: #f0f0f0;
  --bg2: #e5e5e5;
  --bg3: #e0e0e0;
  --bg4: #d5d5d5;
  --ui1: #e2e2e2;
  --ui2: #efefef;
  --ui3: #f2f2f2;
  --ui4: #f9f9f9;
  --h1: #070707;
  --h2: #101010;
  --p1: #131313;
  --p2: #171717;
  --active: #ae70ff;
  --active2: #797bff;
  --border-rad: 10px;
  --border-clr: #45454590;
  --font: "",sans-serif;
  --color-scheme: light;
}

我将主题附加到我的index.scss 文件中，该文件如下所示：

@use "theme";
@use "themes/dark";
@use "themes/light";
//--------------------
//etc...

终极版

让我们开始设置我们的 redux 商店。
在项目目录的 src 下，创建一个名为 store 的新文件夹，其中包含一个名为 slices 的子目录。让我们从 store 目录中的 store.js 文件开始。

它应该是这样的：

import { configurestore } from '@reduxjs/toolkit'
export const store=configurestore({
  reducer:{

  },
});

在开始之前，让我们实际将我们的项目连接到 redux。这就是我的 main.jsx 文件的样子，你的应该看起来类似：

import { strictmode } from 'react';
import { createroot } from 'react-dom/client';
import app from './app.jsx';
import "./index.scss";
import { store } from './store/store';
import { provider } from 'react-redux';
createroot(document.getelementbyid('root'))
  .render(<strictmode>
    <provider store={store}>
      <app />
    </provider>
  </strictmode>,);

现在让我们创建切片。在 slices 目录中创建一个名为 themeslice.js 的文件。

以下是内容：

import { createslice } from '@reduxjs/toolkit'
export const themeslice=createslice({
  name: 'theme',
  initialstate:"dark",
  reducers: {
    settheme:(state,action)=>{
      return action.payload;
    },
  },
})
export const { 
  settheme 
}=themeslice.actions;
export default themeslice.reducer;

从这里，让我们回到我们的商店并添加我们的主题切片作为减速器。

store.js 现在应该是这样的：

import { configurestore } from '@reduxjs/toolkit'
import themereducer from "./slices/themeslice";
export const store=configurestore({
  reducer:{
    theme:themereducer,
  },
});

第 2 部分：功能

功能非常简单。我们现在创建的是 2 个类，它们有自己的 css 变量，以及一个 redux 状态来保存它。我们可以通过运行dispatch(settheme(/*这里的主题*/));
来调整我们的状态要应用我们的主题，我们可以使用效果将主体的 classname 更改为我们的主题，并且为了防止错误，我们可以添加检查以确保它是有效的主题而不是其他主题。

看起来是这样的：

useEffect(()=>{
  switch(theme){
    case "dark":
    case "light":
      document.body.className=theme;break;
    default:
      console.error("unrecognized theme");
      document.body.className="dark";
  }
},[theme]);