Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-01 01:18:10 +02:00
Code Issues Projects Releases Wiki Activity

docs: add more clarification on when to use sx vs styled (#7209)

Browse Source 
This change adds a section on when to use `sx` vs `styled`. I'm adding
it because it was unclear to me when we should use one over the other.
Hopefully this clears it up and makes it easier for others going
forward.

---------

Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
Thomas Heartman 2024-05-29 14:45:05 +02:00 committed by GitHub
parent 6c8b1d8904
commit 9801bf69b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
website/docs/contributing/ADRs/front-end/preferred-styling-method.md
View File

@ -11,14 +11,20 @@ In the codebase, we need to have a uniform way of performing style updates.
## Decision ## Decision
We have decided to move away from using makeStyles as it's currently deprecated from @material/ui, and kept alive with an 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 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. supported natively in @material/ui and sparingly use the sx prop available on all mui components.
### When to use `sx` vs `styled`
As with everything else, whether to use styled components or the `sx` prop depends on the context.
Styled components have better performance characteristics, but it's fairly minor (refer to Material UI's [performance tradeoffs](https://mui.com/system/getting-started/usage/#performance-tradeoffs) doc for more information). So unless you're rendering something a lot of times, it's not really a big deal. But when in doubt: Use styled components. And when using a styled component feels like too much overhead, consider using the `sx` prop.
### Consequences: code sharing ### Consequences: code sharing
With makeStyles it was common to reuse CSS fragments via library utilities. With makeStyles it was common to reuse CSS fragments via library utilities.
In the styled components approach we use themeable functions and object literals In the styled components approach we use themeable functions and object literals.
```ts ```ts
import { Theme } from '@mui/material'; import { Theme } from '@mui/material';