SCSS 및 Redux를 사용하여 React에서 테마 시스템 만들기-JS 튜토리얼-php.cn

SCSS 및 Redux를 사용하여 React에서 테마 시스템 만들기

Susan Sarandon

풀어 주다： 2024-11-11 18:06:02

원래의

632명이 탐색했습니다.

Creating Theme Systems in React with SCSS and Redux

다양한 테마의 앱을 만들고 싶었지만 어떻게 해야 할지 모르셨던 적이 있으신가요?

방법은 다양합니다.

설치 종속성

필요한 모든 것을 설치하는 것부터 시작하겠습니다. 이를 위해서는 SCSS와 Redux가 필요합니다:

yarn add sass
yarn add @reduxjs/toolkit

로그인 후 복사

이 스크립트를 실행하기만 하면 필요한 모든 것이 설치되고 시작할 수 있습니다.

파트 1: 설정

SCSS

실제로 테마가 아닌 CSS 변수로 설정할 모든 Sass 변수를 포함하는 theme.scss 폴더를 만드는 것부터 시작하겠습니다.

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;
}

로그인 후 복사

테마

이제 실제로 테마부터 시작하겠습니다. 시작하려면 themes라는 새 디렉터리에 파일을 만듭니다. 나중에 더 만들 수도 있지만 이 튜토리얼에서는 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 아래에 Slices라는 하위 디렉터리가 있는 store라는 새 폴더를 만듭니다. store 디렉토리에 있는 store.js 파일부터 시작해 보겠습니다.

다음과 같이 표시됩니다.

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

  },
});

로그인 후 복사

시작하기 전에 실제로 프로젝트를 redux에 연결해 보겠습니다. 이것이 내 main.jsx 파일의 모습이며 여러분의 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: 기능

기능은 초간단합니다. 이제 우리가 만든 것은 자체 CSS 변수가 있는 2개의 클래스와 이를 보유하는 redux 상태입니다. dispatch(setTheme(/*theme here*/));
를 실행하여 상태를 확인할 수 있습니다. 테마를 적용하려면 효과를 사용하여 본문의 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...

로그인 후 복사