@mui/codemod
Version:
Codemod scripts for Material UI.
62 lines (61 loc) • 1.83 kB
JavaScript
;
const Test = styled('div')(({
theme
}) => ({
color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main,
background: `linear-gradient(45deg, ${theme.palette.mode === 'dark' ? theme.palette.primary[400] : theme.palette.primary[600]} 30%, ${theme.palette.mode === 'dark' ? theme.palette.primary[200] : theme.palette.primary[500]} 90%})`
}));
const StyledPopper = styled(Popper)(({
theme
}) => ({
border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
boxShadow: `0 8px 24px ${theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'}`,
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128'
}));
const AntSwitch = styled(Switch)(({
theme
}) => ({
width: 28,
height: 16,
padding: 0,
display: 'flex',
'&:active': {
'& .MuiSwitch-thumb': {
width: 15
},
'& .MuiSwitch-switchBase.Mui-checked': {
transform: 'translateX(9px)'
}
},
'& .MuiSwitch-switchBase': {
padding: 2,
'&.Mui-checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff'
}
}
},
'& .MuiSwitch-thumb': {
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
width: 12,
height: 12,
borderRadius: 6,
transition: theme.transitions.create(['width'], {
duration: 200
})
},
'& .MuiSwitch-track': {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
boxSizing: 'border-box'
}
}));