mirror of
https://github.com/Unleash/unleash.git
synced 2024-11-01 19:07:38 +01:00
ca761584c6
Having old ADRs makes it harder for newcomers, that have to navigate through many ADRs and spot the ones that were superseded by others. We can save the mental burden by just moving the old ones to a deprecated folder
1.1 KiB
1.1 KiB
| title |
|---|
| ADR: preferred styling method |
This document supersedes ADR: preferred styles import placement
Background
In the codebase, we need to have a uniform way of performing style updates.
Decision
We have decided to move away from using makeStyles as it's currently deprecated from @material/ui, and kept alive with an external interop package to maintain compatability with the latest version. The preferred path forward is to use styled components which is supported natively in @material/ui and sparingly use the sx prop available on all mui components.
Consequences: code sharing
With makeStyles it was common to reuse CSS fragments via library utilities. In the styled components approach we use themeable functions and object literals
import { Theme } from '@mui/material';
export const focusable = (theme: Theme) => ({
color: theme.palette.primary.main,
});
export const flexRow = {
display: 'flex',
alignItems: 'center',
};
Usage:
const StyledLink = styled(Link)(({ theme }) => ({
...focusable(theme),
}));
<IconButton sx={focusable}/>