Skip to content

[styled-engine-sc] Using extended styles with styled-components breaks types #44246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
megos opened this issue Oct 29, 2024 · 3 comments · May be fixed by #45988
Open

[styled-engine-sc] Using extended styles with styled-components breaks types #44246

megos opened this issue Oct 29, 2024 · 3 comments · May be fixed by #45988
Assignees
@mnajdova
Labels
bug 🐛 Something doesn't work package: styled-engine-sc Specific to styled-components typescript

Comments

@megos
Copy link
Contributor

megos commented Oct 29, 2024 •
edited by github-actions bot
Loading

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.
    image
  • No warning if the wrong property is assigned.
    • It should be "outlined"
      image

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

image

extended

image

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
@megos megos added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 29, 2024
@mj12albert
Copy link
Member

I wonder if it is related to #44127 at all

@mj12albert mj12albert added package: styled-engine-sc Specific to styled-components typescript labels Oct 29, 2024
@mnajdova
Copy link
Member

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.

@mnajdova mnajdova added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 15, 2024
@mnajdova mnajdova assigned mnajdova and unassigned mj12albert Nov 15, 2024
@megos
Copy link
Contributor Author

megos commented Apr 9, 2025

@mnajdova Has there been any update? If you are busy, I'll try to fix it.

@megos megos linked a pull request Apr 23, 2025 that will close this issue
Open
1 task
@ZeeshanTamboli ZeeshanTamboli changed the title Using extended styles with styled-components breaks types [styled-engine-sc] Using extended styles with styled-components breaks types May 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mnajdova mnajdova

Labels
bug 🐛 Something doesn't work package: styled-engine-sc Specific to styled-components typescript
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[styled-engine-sc] Fix types for components extended with styled megos/material-ui
3 participants
@mnajdova @mj12albert @megos