sx prop as a function for type safety

[Raicuparta]

The new sx prop has the advantage of being able to refer to theme keys without having to import a theme object, which is great. Problem is, using theme keys as plain strings wastes the benefit of type safety in TypeScript. As far as I'm aware, it wouldn't be feasible to type check the possible values via typed template strings.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Accept functions in the sx prop, with the only argument being the theme.

Examples 🌈

<Box sx={({ palette }) => ({
  backgroundColor: palette.background.paper
})} />

Motivation 🔦

Type safety, while avoiding using the theme hooks in the parent component.

[mnajdova]

Thanks for the report. We could investigate using template literal types. There is a similar discussion to it in #26475. Regarding the callback, you could use

<Box sx={{
  backgroundColor: ({ palette }) => palette.background.paper
}} />

But I wouldn't recommend changing every prop to callback, only for type safety. I remember we discussed making the sx prop also a function on the theme, but at that moment it felt like there are too many different APIs around it.

[Raicuparta]

Oh, I wasn't aware that was possible. Closing this then. I did mention template literal types, but honestly it doesn't seem like it's feasible. I'll pay attention to the discussion.