casamia918/mui typescript intellisense slow issue.md

## mui typescript intellisense slow issue.md

      
    Raw
  

              mui typescript intellisense slow issue.md
            
          
    keyword: material ui, mui, typescript, intellisense, vscode
microsoft/TypeScript#39326
microsoft/TypeScript#34801
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),    
}