[theme] Add theme color strong typing onto the sx color properties

[soullivaneuh]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Add strong type checking onto the palette theme aware sx properties.

Examples 🌈

No response

Motivation 🔦

Since MUI v5, the suggested way to configure the color related sx props is to use string reference of the theme palette, making the implementation simpler: https://mui.com/system/the-sx-prop/#palette

However, with the moving from theme.palette to string reference, we loose the typescript strong checking of the available color.

The sx color prop for example, will only suggest css related values, not something like primary.main.

Because of that, I'm still preferring the theme.palette usage.

It would be a great addition to have type checking on the palette theme aware properties.

This was also something asked on StackOverflow: https://stackoverflow.com/q/69888051/1731473

[mitoihs]

I've just encountered the need for that feature when using NextJs SSR feature. I can't use
backgroundColor: theme => theme.palette.primary.black because Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
It works fine with backgroundColor: "primary.black" but then I'm losing strong typing.

[CalebJamesStevens]

I've just encountered the need for that feature when using NextJs SSR feature. I can't use backgroundColor: theme => theme.palette.primary.black because Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". It works fine with backgroundColor: "primary.black" but then I'm losing strong typing.

i'm running into the same issue right now