Mudança de tema com React e scss não funciona

Question

使用上下文来应用主题，但不具有功能。

Quero pegar a div root e aplicar a classe or removal, para definir o tema a ser usado. Criei 2 arquivos de tema, um claro e outro escuro。 Ja vi que o Problema não é no botão e nem na hora de adicionar a classe.

import { createContext, useState } from "react";

// Criação do contexto
const MeuContexto = createContext();

// Componente provedor do contexto
function MeuContextoProvider(props) {
  // Definindo o estado para armazenar os dados
  const [dados, setDados] = useState({});
  const [theme, setTheme] = useState("theme-light");

  // Função para atualizar os dados no contexto
  const atualizarDados = (novosDados) => {
    setDados(novosDados);
  };

  // Função para alternar entre os temas
  const toggleTema = () => {
    setTheme((prevTema) => {
      if (prevTema === "theme-light") {
        document.getElementById("root").classList.add("dark-theme");
        return "theme-dark";
      } else {
        document.getElementById("root").classList.remove("dark-theme");
        return "theme-light";
      }
    });
    console.log(document.getElementById("root"));
  };

  return (
    <MeuContexto.Provider value={{ dados, atualizarDados, theme, toggleTema }}>
      {props.children}
    </MeuContexto.Provider>
  );
}

export { MeuContextoProvider, MeuContexto };

@import "theme-dark";
@import "theme-light";

// Aplicando o tema escolhido
#root.dark-theme {
  @import "theme-dark";

  background: $background-main;
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

#root {
  background: $background-main;
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

// Bootstrap
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

// Botões
.btn-primary {
  $btn-color: #ffffff !important;
  color: #ffffff !important;

  &:hover {
    $hover-color: $blue-secondary;
    background-color: $hover-color !important;
  }
}

Tentei outras abordagens，mas não foi

Answer 1

Eu tive de fazer uma coisa parecida e acabei por fazer um bocado differenterente de comotens.

Eu Tinha um

TemplateManager.jsx

que tratava de importar o template certo

const TemplateViolet = lazy(() => import('./TemplateViolet'));


<Suspense fallback={<></>}>
   {template_id == 1 && (
        <TemplateViolet />
   )}
</Suspense>

E dentro da

TemplateViolet

carrego o ficheiro certo

import { useEffect } from 'react';
export default function TemplateViolet() {
    useEffect(() => {
        (async () => {
            await import('../../../sass/template-violet.scss');
        })();
    }, []);
    return null;
}

E na app.js chamo o

TemplateManager

<Suspense fallback={<></>}>
    <TemplateManager />
</Suspense>

不能使用任何模板，也不能使用任何模板。 Tambem Podes ter um ficheiro light/dark que muda apenas variáveis e depoistens um ficheiro com os estilos todos que é importado pelo ficheiro light/dark

费切罗深色

$primary-color: #000;

@import "all-styles.scss";

Espero que te ajude。