Refactor styles to follow MUI
VakarisZ opened this issue · comments
Vakaris Žilius commented
Refactor
something.module.scss
don't follow the styling practices outlined in MUI documentation, usage of themes are a lot harder from there. Instead, we should refactor our styling approach as outlined in MUI customization guide
Tasks
- Replace
something.module.scss
files with style objects importable by MUI objects - Extend/validate styling/UI guidelines to explain best approaches and provide links to useful documentation @VakarisZ
Kekoa Kaaikala commented
To clarify, you're suggesting we move from using CSS files to applying styles to components using the MUI styled()
function? Thoughts, @ordabach?
On the plus side, this should sidestep our issue with component tests failing due to the incompatibility with cypress and nextjs 13+.
Note: Styles are provided via the styles
parameter, and look like:
{
width: 300,
color: theme.palette.success.main,
'& .MuiSlider-thumb': {
'&:hover, &.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
},
'&.Mui-active': {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
},
},
}