/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
40 строк
1 KB
Derick M
[examples] Add Theme Mode Switch to Next.js TS example (#43576)
11 дек 2024, 09:28
Не верифицирован
11 дек 2024, 09:28
6497d21
Код
Авторство
О чём код?
'use client'; import * as React from 'react'; import Box from '@mui/material/Box'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import Select from '@mui/material/Select'; import { useColorScheme } from '@mui/material/styles'; export default function ModeSwitch() { const { mode, setMode } = useColorScheme(); if (!mode) { return null; } return ( <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 1, p: 1, }} > <FormControl> <InputLabel id="mode-select-label">Theme</InputLabel> <Select labelId="mode-select-label" id="mode-select" value={mode} onChange={(event) => setMode(event.target.value as typeof mode)} label="Theme" > <MenuItem value="system">System</MenuItem> <MenuItem value="light">Light</MenuItem> <MenuItem value="dark">Dark</MenuItem> </Select> </FormControl> </Box> ); }