Skip to content
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.

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

Using extended styles with styled-components breaks types #44246

Open
megos opened this issue Oct 29, 2024 · 1 comment
Open

Using extended styles with styled-components breaks types #44246

megos opened this issue Oct 29, 2024 · 1 comment
Assignees
Labels
package: styled-engine-sc Specific to styled-components status: waiting for maintainer These issues haven't been looked at yet by a maintainer typescript

Comments

@megos
Copy link
Contributor

megos commented Oct 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: styled-engine-sc Specific to styled-components status: waiting for maintainer These issues haven't been looked at yet by a maintainer typescript
Projects
None yet
Development

No branches or pull requests

2 participants