-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add CSS variables support for Material UI components (#32835)
- Loading branch information
1 parent
4f4bf22
commit d14be1c
Showing
29 changed files
with
1,166 additions
and
310 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
import * as React from 'react'; | ||
import { | ||
Experimental_CssVarsProvider as CssVarsProvider, | ||
useColorScheme, | ||
} from '@mui/material/styles'; | ||
import CssBaseline from '@mui/material/CssBaseline'; | ||
import AppBar from '@mui/material/AppBar'; | ||
import Box from '@mui/material/Box'; | ||
import Toolbar from '@mui/material/Toolbar'; | ||
import Typography from '@mui/material/Typography'; | ||
import Button from '@mui/material/Button'; | ||
import IconButton from '@mui/material/IconButton'; | ||
import MenuIcon from '@mui/icons-material/Menu'; | ||
import Container from '@mui/material/Container'; | ||
import Moon from '@mui/icons-material/DarkMode'; | ||
import Sun from '@mui/icons-material/LightMode'; | ||
|
||
const ColorSchemePicker = () => { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Button | ||
variant="outlined" | ||
onClick={() => { | ||
if (mode === 'light') { | ||
setMode('dark'); | ||
} else { | ||
setMode('light'); | ||
} | ||
}} | ||
> | ||
{mode === 'light' ? <Moon /> : <Sun />} | ||
</Button> | ||
); | ||
}; | ||
|
||
export default function CssVarsTemplate() { | ||
return ( | ||
<CssVarsProvider> | ||
<CssBaseline /> | ||
<Container sx={{ my: 5 }}> | ||
<Box sx={{ pb: 2 }}> | ||
<ColorSchemePicker /> | ||
</Box> | ||
<Box | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))', | ||
gridAutoRows: 'minmax(160px, auto)', | ||
gap: 2, | ||
'& > div': { | ||
placeSelf: 'center', | ||
}, | ||
}} | ||
> | ||
<AppBar position="static" color="default" enableColorOnDark> | ||
<Toolbar> | ||
<IconButton | ||
size="large" | ||
edge="start" | ||
color="inherit" | ||
aria-label="menu" | ||
sx={{ mr: 2 }} | ||
> | ||
<MenuIcon /> | ||
</IconButton> | ||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
News | ||
</Typography> | ||
<Button color="inherit">Login</Button> | ||
</Toolbar> | ||
</AppBar> | ||
<AppBar position="static" enableColorOnDark> | ||
<Toolbar> | ||
<IconButton | ||
size="large" | ||
edge="start" | ||
color="inherit" | ||
aria-label="menu" | ||
sx={{ mr: 2 }} | ||
> | ||
<MenuIcon /> | ||
</IconButton> | ||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
News | ||
</Typography> | ||
<Button color="inherit">Login</Button> | ||
</Toolbar> | ||
</AppBar> | ||
<AppBar position="static" color="primary" elevation={12}> | ||
<Toolbar> | ||
<IconButton | ||
size="large" | ||
edge="start" | ||
color="inherit" | ||
aria-label="menu" | ||
sx={{ mr: 2 }} | ||
> | ||
<MenuIcon /> | ||
</IconButton> | ||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
News | ||
</Typography> | ||
<Button color="inherit">Login</Button> | ||
</Toolbar> | ||
</AppBar> | ||
</Box> | ||
</Container> | ||
</CssVarsProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import * as React from 'react'; | ||
import { | ||
Experimental_CssVarsProvider as CssVarsProvider, | ||
useColorScheme, | ||
} from '@mui/material/styles'; | ||
import CssBaseline from '@mui/material/CssBaseline'; | ||
import Box from '@mui/material/Box'; | ||
import Button from '@mui/material/Button'; | ||
import Container from '@mui/material/Container'; | ||
import Moon from '@mui/icons-material/DarkMode'; | ||
import Sun from '@mui/icons-material/LightMode'; | ||
import Chip from '@mui/material/Chip'; | ||
import Stack from '@mui/material/Stack'; | ||
|
||
const ColorSchemePicker = () => { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Button | ||
variant="outlined" | ||
onClick={() => { | ||
if (mode === 'light') { | ||
setMode('dark'); | ||
} else { | ||
setMode('light'); | ||
} | ||
}} | ||
> | ||
{mode === 'light' ? <Moon /> : <Sun />} | ||
</Button> | ||
); | ||
}; | ||
|
||
export default function CssVarsTemplate() { | ||
return ( | ||
<CssVarsProvider> | ||
<CssBaseline /> | ||
<Container sx={{ my: 5 }}> | ||
<Box sx={{ pb: 2 }}> | ||
<ColorSchemePicker /> | ||
</Box> | ||
<Box | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))', | ||
gridAutoRows: 'minmax(160px, auto)', | ||
gap: 2, | ||
'& > div': { | ||
placeSelf: 'center', | ||
}, | ||
}} | ||
> | ||
<Stack spacing={1} alignItems="center"> | ||
<Stack direction="row" spacing={1}> | ||
<Chip label="primary" color="primary" /> | ||
<Chip label="success" color="success" /> | ||
</Stack> | ||
<Stack direction="row" spacing={1}> | ||
<Chip label="primary" color="primary" variant="outlined" /> | ||
<Chip label="success" color="success" variant="outlined" /> | ||
</Stack> | ||
<Stack direction="row" spacing={1}> | ||
<Chip label="Deletable" onDelete={() => {}} /> | ||
<Chip label="Deletable" variant="outlined" onDelete={() => {}} /> | ||
</Stack> | ||
</Stack> | ||
</Box> | ||
</Container> | ||
</CssVarsProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import * as React from 'react'; | ||
import { | ||
Experimental_CssVarsProvider as CssVarsProvider, | ||
useColorScheme, | ||
} from '@mui/material/styles'; | ||
import CssBaseline from '@mui/material/CssBaseline'; | ||
import Box from '@mui/material/Box'; | ||
import Button from '@mui/material/Button'; | ||
import Container from '@mui/material/Container'; | ||
import FilledInput from '@mui/material/FilledInput'; | ||
import OutlinedInput from '@mui/material/OutlinedInput'; | ||
import Moon from '@mui/icons-material/DarkMode'; | ||
import Sun from '@mui/icons-material/LightMode'; | ||
|
||
const ColorSchemePicker = () => { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Button | ||
variant="outlined" | ||
onClick={() => { | ||
if (mode === 'light') { | ||
setMode('dark'); | ||
} else { | ||
setMode('light'); | ||
} | ||
}} | ||
> | ||
{mode === 'light' ? <Moon /> : <Sun />} | ||
</Button> | ||
); | ||
}; | ||
|
||
export default function CssVarsTemplate() { | ||
return ( | ||
<CssVarsProvider> | ||
<CssBaseline /> | ||
<Container sx={{ my: 5 }}> | ||
<Box sx={{ pb: 2 }}> | ||
<ColorSchemePicker /> | ||
</Box> | ||
<Box | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))', | ||
gridAutoRows: 'minmax(160px, auto)', | ||
gap: 2, | ||
'& > div': { | ||
placeSelf: 'center', | ||
}, | ||
}} | ||
> | ||
<FilledInput placeholder="Placeholder" /> | ||
<FilledInput placeholder="Placeholder" color="secondary" /> | ||
<FilledInput placeholder="Placeholder" disabled /> | ||
<FilledInput placeholder="Placeholder" error /> | ||
<OutlinedInput placeholder="Placeholder" /> | ||
<OutlinedInput placeholder="Placeholder" color="secondary" /> | ||
<OutlinedInput placeholder="Placeholder" disabled /> | ||
<OutlinedInput placeholder="Placeholder" error /> | ||
</Box> | ||
</Container> | ||
</CssVarsProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import * as React from 'react'; | ||
import { | ||
Experimental_CssVarsProvider as CssVarsProvider, | ||
useColorScheme, | ||
} from '@mui/material/styles'; | ||
import CssBaseline from '@mui/material/CssBaseline'; | ||
import Box from '@mui/material/Box'; | ||
import Button from '@mui/material/Button'; | ||
import Container from '@mui/material/Container'; | ||
import Stack from '@mui/material/Stack'; | ||
import LinearProgress from '@mui/material/LinearProgress'; | ||
import Moon from '@mui/icons-material/DarkMode'; | ||
import Sun from '@mui/icons-material/LightMode'; | ||
|
||
const ColorSchemePicker = () => { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Button | ||
variant="outlined" | ||
onClick={() => { | ||
if (mode === 'light') { | ||
setMode('dark'); | ||
} else { | ||
setMode('light'); | ||
} | ||
}} | ||
> | ||
{mode === 'light' ? <Moon /> : <Sun />} | ||
</Button> | ||
); | ||
}; | ||
|
||
export default function CssVarsTemplate() { | ||
return ( | ||
<CssVarsProvider> | ||
<CssBaseline /> | ||
<Container sx={{ my: 5 }}> | ||
<Box sx={{ pb: 2 }}> | ||
<ColorSchemePicker /> | ||
</Box> | ||
<Box | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))', | ||
gridAutoRows: 'minmax(160px, auto)', | ||
gap: 2, | ||
'& > div': { | ||
placeSelf: 'center', | ||
}, | ||
}} | ||
> | ||
<Stack sx={{ width: '100%', color: 'grey.500' }} spacing={2}> | ||
<LinearProgress /> | ||
<LinearProgress color="secondary" /> | ||
<LinearProgress color="success" /> | ||
<LinearProgress color="error" /> | ||
<LinearProgress color="warning" /> | ||
<LinearProgress color="inherit" /> | ||
</Stack> | ||
</Box> | ||
</Container> | ||
</CssVarsProvider> | ||
); | ||
} |
Oops, something went wrong.