keyword: material ui, mui, typescript, intellisense, vscode
When using mui with typescript, there is performance issue with vscode intellisense, because of type checking.
I've read the comments and found a clue that some csstypes given by mui might be source of issue.
So, I checked my code and found that I've been using SxProps to assign type of custom style object.
When I just using SxProps only, I subjected performance issue. (Intellisense loading is not ended, load infinitely).
But when I give Theme interface to the generic of SxProps (SxProps<Theme>), now intellisense is working.
Be sure that Theme should be imported from @mui/material, not from @mui/system.
By using Theme imported from @mui/system, intellisense is still not working.
// package.json
"dependencies": {
"@emotion/react": "11.5.0",
"@emotion/styled": "11.3.0",
"@mui/icons-material": "^5.3.1",
"@mui/lab": "^5.0.0-alpha.66",
"@mui/material": "^5.3.1",
"@mui/styles": "^5.3.0",
}- import { Theme } from '@mui/system';
+ import { Theme, SxProps } from '@mui/material';
- const mySx: SxProps = {
+ const mySx: SxProps<Theme> = {
paddingLeft: (theme: Theme) => theme.spacing(1),
}
microsoft/TypeScript#34801 (comment)