Переключение темы React без обновления компонентов ⇐ CSS

[Anonymous]

У меня возникла проблема с переключением тем в моем приложении React. Приложение поддерживает две темы, которые я буду называть Theme One и Theme Two. Я реализовал отложенную загрузку для динамической загрузки соответствующих компонентов темы на основе выбранной темы.
Каждая тема определяет свой собственный стиль для общего класса кнопок. Например, в Theme One кнопка имеет синий цвет, а в Theme Two — коричневый.
Проблема возникает, когда я переключаю темы с помощью кнопки. Первоначально при переходе от темы один к теме два цвет кнопки корректно меняется с коричневого на синий. Однако после переключения на Theme One цвет кнопки не становится коричневым, как ожидалось. Последующие переключения тем также не отражают никаких изменений цвета кнопки.
код: https://codesandbox.io/p/devbox/wizardl ... ile=%2Fsrc %2FDashboard.tsx%3A12%2C14

Код: Выделить всё

// App.js
import React, { createContext, useState, startTransition, useEffect } from "react";
// Lazy load themes
const ThemeOne = React.lazy(() => import("./themes/theme-one"));
const ThemeTwo = React.lazy(() => import("./themes/theme-two"));

export const MawbThemeContext = createContext({ _theme: "" });

const App = () => {
const [_theme, setTheme] = useState("themeOne");

const handleChangeTheme = () => {
startTransition(() => {
if (_theme === "themeOne") {
setTheme("themeTwo");
} else {
setTheme("themeOne");
}
});
};

let themeComponent;
if (_theme === "themeOne") {
themeComponent = ;
} else if (_theme === "themeTwo") {
themeComponent = ;
} else {
themeComponent = ;
}

useEffect(() => {
startTransition(() => {
console.log("transition", _theme); // Ensure theme is changing correctly
});
}, [_theme]);

return (


{themeComponent}


);
};

export default App;

Я был бы признателен за любую информацию о том, почему обновления тем не отображаются правильно, особенно при многократном переходе между темами.

Подробнее здесь: https://stackoverflow.com/questions/784 ... components