Open
Description
Steps to reproduce
Link to live example: https://stackblitz.com/edit/vitejs-vite-afbuyz?file=src%2FApp.tsx&view=editor
Steps:
- Use MUI with styled-components (https://mui.com/material-ui/integrations/styled-components)
- Use extended styles with styled (https://styled-components.com/docs/basics#extending-styles)
Current behavior
- No Intellisense is displayed.
- No warning if the wrong property is assigned.
- It should be "outlined"
- It should be "outlined"
Expected behavior
The types are correct even if extended styles are used.
Context
- There is no problem using styled-components directly.
- There is no problem with styled when using emotion.
The types change when using extended styles.
styled
extended
Your environment
npx @mui/envinfo
I used Chrome: 130.0.6723.70
System:
OS: Linux 5.0 undefined
Binaries:
Node: 18.20.3 - /usr/local/bin/node
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@mui/core-downloads-tracker: 6.1.5
@mui/material: latest => 6.1.5
@mui/private-theming: 6.1.5
@mui/styled-engine: 6.1.5
@mui/styled-engine-sc: latest => 6.1.5
@mui/system: 6.1.5
@mui/types: 7.2.18
@mui/utils: 6.1.5
@types/react: ^18.3.11 => 18.3.12
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: latest => 6.1.13
typescript: ~5.6.2 => 5.6.3
tsc --showConfig
{
"compilerOptions": {
"paths": {
"@mui/styled-engine": [
"./node_modules/@mui/styled-engine-sc"
]
},
"target": "es5",
"module": "esnext",
"jsx": "react-jsx",
"noEmit": true,
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node10",
"resolveJsonModule": true,
"isolatedModules": true,
"skipLibCheck": false,
"preserveConstEnums": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"strictBuiltinIteratorReturn": true,
"alwaysStrict": true,
"useUnknownInCatchVariables": true
},
"files": [
"./src/App.tsx",
"./src/main.tsx",
"./src/vite-env.d.ts"
],
"include": [
"src/**/*"
]
}
Search keywords: styled-engine-sc styled-components TypeScript