mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-28 19:06:12 +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
44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
---
|
|
title: "ADR: preferred styling method"
|
|
---
|
|
|
|
This document supersedes [ADR: preferred styles import placement](./deprecated/preferred-styles-import-placement.md)
|
|
|
|
|
|
## 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
|
|
|
|
```ts
|
|
import { Theme } from '@mui/material';
|
|
|
|
export const focusable = (theme: Theme) => ({
|
|
color: theme.palette.primary.main,
|
|
});
|
|
|
|
export const flexRow = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
};
|
|
```
|
|
|
|
Usage:
|
|
```ts
|
|
const StyledLink = styled(Link)(({ theme }) => ({
|
|
...focusable(theme),
|
|
}));
|
|
|
|
<IconButton sx={focusable}/>
|
|
```
|