您是否曾经想开发一个具有多个主题的应用程序，但不知道如何去做？有很多方法
安装依赖项
让我们开始安装我们需要的一切。为此，我们需要 scss 和 redux：
yarn add sassyarn 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( ,);
现在让我们创建切片。在 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]);
第 3 部分：决赛
感谢您的阅读！
这是链接
以上就是使用 SCSS 和 Redux 在 React 中创建主题系统的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495855.html
微信扫一扫 
支付宝扫一扫 
