If you want to identify typos in the MUI System sx props during compilation using TypeScript, it's important to activate strict type checking for the sx prop. By default, the sx prop permits any valid CSS properties, including unknown or misspelled ones.
To enforce strict type checking, utilize the SystemStyleObject type from @mui/system instead of SxProps<Theme>. Below are some code snippets that can help rectify this issue:
Update the sxRoot type to incorporate SystemStyleObject:
import { Box, Typography } from '@mui/material';
import { SystemStyleObject } from '@mui/system';
const sxRoot: SystemStyleObject = {
width: '100vw',
height: '100vh',
diplay: 'grid', // <-- This will now lead to a TS compile-time error
placeItems: 'center',
};
export const App = () => (
<Box sx={sxRoot}>
<Typography>{'Hello World'}</Typography>
</Box>
);
By utilizing SystemStyleObject, TypeScript will ensure stringent typing for the sx prop and catch any erroneous or unidentified properties at compile time.
Additionally, ensure you have all the required dependencies installed for this solution to function correctly.
npm install @mui/material @mui/system @emotion/react @emotion/styled
Subsequently, update the tsconfig.json file with these settings:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitReturns": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}