React Component CSS不切换组件样式

Question

我正在创建一个具有在暗/亮模式之间切换功能的 React Notes 应用程序。 所以基本上我写了一个 React Toggle 来在暗模式和亮模式之间切换。 但显然代码只是切换背景和 h1 颜色，而不是根据需要切换注释颜色。

显然组件颜色似乎没有改变。

Toggle.js 在“theme-dark”和“theme-light”之间切换类名，进而切换 CSS。但它似乎并没有改变notes组件的CSS。

Toggle.js：

import React, { useEffect, useState } from 'react';
import '../index.css';
import { setTheme } from '../theme';
import { MdDarkMode, MdOutlineDarkMode } from 'react-icons/md'


function Toggle() {
    const [ togClass, setTogClass ] = useState('dark');
    let theme = localStorage.getItem('theme');

    const handleOnClick = () => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTheme('theme-light');
            setTogClass('light')
        } else {
            setTheme('theme-dark');
            setTogClass('dark')
        }
    }

    useEffect(() => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTogClass('dark')
        } else if (localStorage.getItem('theme') === 'theme-light') {
            setTogClass('light')
        }
    }, [theme])

    return (
        <div className="container--toggle"> {
            <button 
                id="toggle" 
                className={"toggle--button "+togClass} 
                onClick={handleOnClick} 
              >
              {togClass === 'light' ? <MdOutlineDarkMode size='1.5rem' /> :
              <MdDarkMode size='1.5rem'/>}
              
            </button>
          }
          <label htmlFor="toggle" className="toggle--label">
              <span className="toggle--label-background"></span>
          </label>
        </div>
    )
  }

  export default Toggle

主题.js

function setTheme(themeName) {
  localStorage.setItem('theme', themeName);
  document.documentElement.className = themeName;
}

function keepTheme() {
if (localStorage.getItem('theme')) {
  if (localStorage.getItem('theme') === 'theme-dark') {
    setTheme('theme-dark');
  } else if (localStorage.getItem('theme') === 'theme-light') {
    setTheme('theme-light')
  }
} else {
  setTheme('theme-dark')
  }
}

export {
  setTheme,
  keepTheme
}

我确信 React Toggle.js 可以正常工作。请注意，我是 CSS 变量的新手（您可能知道），我认为这就是代码混乱的地方。

index.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.theme-light {
  --dark-text: black;
  --light-text: #5E4B56;
  --dark-background: #FFCFDF;
  --light-background: #FFCFDF;
  --accent: #DBE7E4;
  --button-border: #5E4B56;
    --note: #E0F9B5;
    --note-new: #A5DEE5;
}
.theme-dark {
  --dark-text: #EEEEEE;
  --light-text: #F9F8F8;  
  --dark-background: #222831;
  --light-background: #586F7C;
  --accent: #B8DBD9;
  --button-border: #B8DBD9;
    --note: #EEEEEE;
    --note-new: #00ADB5;
}
 #root {
  background-color: var(--dark-background);
  color: var(--dark-text);
}
.toggle--button {
    cursor: pointer;
}
.toggle--button.dark {
    border: none;
  --dark-background: #222831;
    background-color: var(--dark-background);
}
.toggle--button.light {
    border: none;
    background-color: var(--dark-background);
}


code {
    font-family: source-code-pro, Menlo, Monaco, Consolas,
        'Courier New', monospace;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 100vh;
}

textarea {
    color: var(--dark-text);
    border: none;
    resize: none;
    background-color: var(--note-new);
}

textarea:focus {
    outline: none;
}

.save {
    size: 10rem;
    background-color: #e1e1e1;
    border: none;
    border-radius: 15px;
    padding: 5px 10px 5px 10px;
}

.save:hover {
    background-color: #ededed;
    cursor: pointer;
}

.note {
    color: var(--dark-text);
    background-color: var(--note);
    border-radius: 10px;
    padding: 1rem;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    white-space: pre-wrap;
}

.note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notes-list {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(
        auto-fill,
        minmax(250px, 1fr)
    );
}

.note.new {
    background-color: var(--note-new);
}

.delete-icon {
    cursor: pointer;
}

.search {
    display: flex;
    align-items: center;
    background-color: rgb(233, 233, 233);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 1.5em;
}

.search input {
    border: none;
    background-color: rgb(233, 233, 233);
    width: 100%;
}

.search-icons {
    color: black;
}
.search input:focus {
    outline: none;
}

灯光模式：

黑暗模式：

我希望深色模式从浅色模式切换音符的颜色。 这就是我希望它看起来的样子：

Answer 1

我的错误，我的 App.js 文件的类名设置为主题光，这阻止了覆盖。