Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01: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

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

@ -15,10 +15,16 @@ We have decided to move away from using makeStyles as it's currently deprecated
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.
### 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
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
import { Theme } from '@mui/material';