/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/customization/how-to-customize/DynamicCSSVariables.js
53 строки
1 KB
Siriwat K
[docs] Migrate content to the new location (#30757)
04 фев 2022, 07:13
Не верифицирован
04 фев 2022, 07:13
27f1c28
Код
Авторство
О чём код?
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; const CustomSlider = styled(Slider)({ width: 300, color: 'var(--color)', '& .MuiSlider-thumb': { [`&:hover, &.Mui-focusVisible`]: { boxShadow: '0px 0px 0px 8px var(--box-shadow)', }, [`&.Mui-active`]: { boxShadow: '0px 0px 0px 14px var(--box-shadow)', }, }, }); const successVars = { '--color': '#4caf50', '--box-shadow': 'rgb(76, 175, 80, .16)', }; const defaultVars = { '--color': '#1976d2', '--box-shadow': 'rgb(25, 118, 210, .16)', }; export default function DynamicCSSVariables() { const [vars, setVars] = React.useState(defaultVars); const handleChange = (event) => { setVars(event.target.checked ? successVars : defaultVars); }; return ( <React.Fragment> <FormControlLabel control={ <Switch checked={vars === successVars} onChange={handleChange} color="primary" value="dynamic-class-name" /> } label="Success" /> <CustomSlider style={vars} defaultValue={30} sx={{ mt: 1 }} /> </React.Fragment> ); }