Last updated
Last updated
I wouldn't recommend employing the Sx syntax in tandem with TSS, as its benefits don't seem significant in this context. The Sx syntax's primary advantage lies in its brevity, which is especially useful when intertwining JSX and styles. On the other hand, TSS offers the benefit of separating these two aspects.
As an example, I would personally prefer writing:
backgroundColor: theme.palette.primary.main
over
backgroundColor: "primary.main"
While the latter is indeed more concise, it sacrifices type safety for the sake of brevity, which, in my opinion, isn't a favorable trade-off.
Please don't hesitate to if you believe there are aspects I may have overlooked.
You can use the in MUI like so: