Как добавить переключатель тем (из MUI) глобально ⇐ CSS

[Anonymous]

Я новичок в реагировании и создании приложения React с использованием Material-UI (MUI v5) и реализовал маршрутизацию с помощью React Router. Я хочу включить переключатель тем (который присутствует в шаблонах MUI SignUp и SignIn), который позволяет глобально переключаться между светлым, темным и системным режимами. Однако переключатель тем, похоже, не работает должным образом, и когда я пытаюсь это сделать, тема не применяется последовательно на всех страницах.
index.js

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Home from './Home';
import SignIn from './sign-in/SignIn';
import SignUp from './sign-up/SignUp';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter, Route, Routes} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(










);

reportWebVitals();

SignUp.js

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

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import MuiCard from '@mui/material/Card';
import { styled } from '@mui/material/styles';
import AppTheme from '../shared-theme/AppTheme';
import ColorModeSelect from '../shared-theme/ColorModeSelect';
import { GoogleIcon, FacebookIcon } from './CustomIcons';

const Card = styled(MuiCard)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignSelf: 'center',
width: '100%',
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: 'auto',
boxShadow:
'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
[theme.breakpoints.up('sm')]: {
width: '450px',
},
...theme.applyStyles('dark', {
boxShadow:
'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
}),
}));

const SignUpContainer = styled(Stack)(({ theme }) => ({
height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
minHeight: '100%',
padding: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(4),
},
'&::before': {
content: '""',
display: 'block',
position: 'fixed',
zIndex: -1,
inset: 0,
backgroundImage:
'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
backgroundRepeat: 'no-repeat',
...theme.applyStyles('dark', {
backgroundImage:
'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
}),
},
}));

export default function SignUp(props) {
const [emailError, setEmailError] = React.useState(false);
const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
const [passwordError, setPasswordError] = React.useState(false);
const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
const [nameError, setNameError] = React.useState(false);
const [nameErrorMessage, setNameErrorMessage] = React.useState('');

const validateInputs = () => {
const email = document.getElementById('email');
const password = document.getElementById('password');
const name = document.getElementById('name');

let isValid = true;

if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) {
setEmailError(true);
setEmailErrorMessage('Please enter a valid email address.');
isValid = false;
} else {
setEmailError(false);
setEmailErrorMessage('');
}

if (!password.value || password.value.length < 6) {
setPasswordError(true);
setPasswordErrorMessage('Password must be at least 6 characters long.');
isValid = false;
} else {
setPasswordError(false);
setPasswordErrorMessage('');
}

if (!name.value || name.value.length <  1) {
setNameError(true);
setNameErrorMessage('Name is required.');
isValid = false;
} else {
setNameError(false);
setNameErrorMessage('');
}

return isValid;
};

const handleSubmit = (event) => {
if (nameError || emailError || passwordError) {
event.preventDefault();
return;
}
const data = new FormData(event.currentTarget);
console.log({
name: data.get('name'),
lastName: data.get('lastName'),
email: data.get('email'),
password: data.get('password'),
});
};

return (







Sign up



Full name



Email



Password




Sign up



or


 alert('Sign up with Google')}
startIcon={}
>
Sign up with Google

  alert('Sign up with Facebook')}
startIcon={}
>
Sign up with Facebook


Already have an account?{' '}

Sign in






);
}

Я думаю, что переключатель тем взят из компонента colormodeselect, который я прикрепляю сюда,
ColorModeSelect.js

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

import * as React from 'react';
import { useColorScheme } from '@mui/material/styles';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

export default function ColorModeSelect(props) {
const { mode, setMode } = useColorScheme();
if (!mode) {
return null;
}
return (
 setMode(event.target.value)}
SelectDisplayProps={{
'data-screenshot': 'toggle-mode',
}}
{...props}
>
System
Light
Dark

);
}

Пожалуйста, объясните мне, какие изменения мне нужно внести.
Я пробовал
Обернуть все приложение с помощью ThemeProvider.
Добавление компонента ColorModeSelect к компонентам App и Home.

Подробнее здесь: https://stackoverflow.com/questions/792 ... i-globally