42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { CssVarsProvider, extendTheme } from '@mui/material/styles';
|
||
|
|
import AppBar from '@mui/material/AppBar';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Paper from '@mui/material/Paper';
|
||
|
|
import Toolbar from '@mui/material/Toolbar';
|
||
|
|
|
||
|
|
const theme = extendTheme({ colorSchemes: { dark: true }, colorSchemeSelector: '.mode-%s' });
|
||
|
|
|
||
|
|
export default function MaterialUIDefaultDark() {
|
||
|
|
const [, rerender] = React.useState(false);
|
||
|
|
React.useEffect(() => {
|
||
|
|
// Trigger rerender to ensure that the UI does not change after the first render.
|
||
|
|
// To catch bug like https://github.com/mui/material-ui/issues/36452
|
||
|
|
rerender(true);
|
||
|
|
}, []);
|
||
|
|
return (
|
||
|
|
<CssVarsProvider theme={theme}>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
|
||
|
|
gridAutoRows: 'minmax(160px, auto)',
|
||
|
|
gap: 2,
|
||
|
|
'& > div': {
|
||
|
|
placeSelf: 'center',
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<AppBar position="static" color="secondary" elevation={12}>
|
||
|
|
<Toolbar>The color should be `palette.AppBar.darkBg`</Toolbar>
|
||
|
|
</AppBar>
|
||
|
|
<Box sx={{ bgcolor: '#121212', p: 4 }}>
|
||
|
|
<Paper elevation={24} sx={{ bgcolor: '#121212', p: 2, color: '#fff' }}>
|
||
|
|
You should see overlay.
|
||
|
|
</Paper>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</CssVarsProvider>
|
||
|
|
);
|
||
|
|
}
|