Invalid strings are available for sx property names

[ossan-engineer]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

const CustomButton = () => (
  <Button
    sx={{
      mt: 1,
      lm: 1, // ml typo but compiled without type error
    }} 
  />
)

↓ compiled styles

.css-hash {
    margin-top: 8px;
    lm: 1px; // invalid property
}

Expected behavior 🤔

const CustomButton = () => (
  <Button
    sx={{
      mt: 1,
      lm: 1, // want to get a type error here
    }} 
  />
)

Steps to reproduce 🕹

https://codesandbox.io/s/jovial-glitter-kt9uvc?file=/demo.tsx

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[ZeeshanTamboli]

Thanks for reporting! Look like a bug indeed.

I think this happens after we started supporting CSS variable types and CSS variable types with nested selectors (#31163) in the sx prop.

We can use TypeScript template literals in index signatures to fix this. But then this feature is available since TypeScript 4.4+ . It may break for developers using TypeScript version less than 4.4 with Material-UI. In MUI, we support minimum version till TypeScript 3.5.

I will create a PR and see what the MUI team says.

Note: This will only prevent a type error, but styles will still compile.

[siriwatknp]

Based on #33879 (comment), I marked this as "out of scope".