[system] `backgroundColor` can't be used as a prop directly on `Box`

[mohsinulhaq]

trafficstars

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/vigorous-chatterjee-w1nhkz?file=/demo.tsx

In the above sandbox, backgroundColor works, but TypeScript complains about it not being supported.

Current behavior 😯

TypeScript complains about the props being unavailable, even if it works.

Expected behavior 🤔

Typing should just work.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

@mui/material: 5.11.12 // latest of all packages

[hbjORbj]

Here is a list of system properties that can be used directly on the component as a prop: https://mui.com/system/properties/

It doesn't include backgroundColor. Please use sx prop for this property.

[mohsinulhaq]

@hbjORbj Awesome, thanks! But shouldn't the typings also have reflected the same?

[hbjORbj]

But shouldn't the typings also have reflected the same?

The typings reflect the same, and isn't that why you got a TS complaint when using backgroundColor directly?

[mohsinulhaq]

@hbjORbj sorry, I mean the other way. I meant to ask why is it working when TS says it can't work.

[hbjORbj]

My bad. In fact, background-color should be supported too. The documentation says the following

Note that this table only lists custom properties, all other regular CSS properties and selectors are supported.

I figured that bgcolor satisfies the typing.

https://github.com/mui/material-ui/blob/aff4ec6a8d5d4e9526a3b81123fdca4f0ddb666a/packages/mui-system/src/styleFunctionSx/AliasesCSSProperties.d.ts#L15

Here is a working Codesandbox: https://codesandbox.io/s/green-sunset-egmmdq

Thanks for the report. I need to ask other team members to understand better but I think bgcolor was used, not backgroundColor, in order to make some distinguishments between the system property and the CSS property.

[mohsinulhaq]

@hbjORbj thanks for looking into this. Did you get to find out why in the whole list, background-color became bgColor and none of the other properties did that?

[Shemrock3267]

@hbjORbj This one was really handy. Thanks. 🙌