使用 SCSS 和 Redux 在 React 中建立主題系統-js教程-PHP中文網

Creating Theme Systems in React with SCSS and Redux

您是否曾經想開發一個具有多個主題的應用程序，但不知道如何去做？有很多方法

安裝依賴項

讓我們開始安裝我們需要的一切。為此，我們需要 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 現在應該是這樣的：

yarn add sass
yarn add @reduxjs/toolkit

登入後複製

第 2 部分：功能

功能非常簡單。我們現在創建的是 2 個類，它們有自己的 css 變量，以及一個 redux 狀態來保存它。我們可以透過執行dispatch(setTheme(/*這裡的主題*/));
來調整我們的狀態要應用我們的主題，我們可以使用效果將主體的 className 更改為我們的主題，並且為了防止錯誤，我們可以添加檢查以確保它是有效的主題而不是其他主題。

看起來是這樣的：

$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...

登入後複製