Using extended styles with styled-components breaks types

[megos]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/vitejs-vite-afbuyz?file=src%2FApp.tsx&view=editor

Steps:

1. Use MUI with styled-components (https://mui.com/material-ui/integrations/styled-components)
2. 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"
    

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

[mj12albert]

I wonder if it is related to #44127 at all

[mnajdova]

I wonder if it is related to #44127 at all

It's not related, looks like a bug to me. I can take a look at this next week.