@mui/material/styles exports incorrectly typed function when using styled-engine-sc and typescript

[andyGallagher]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When using styled-components and TypeScript, import { styled } from '@mui/material/styles' imports an object of type CreateMUIStyled<Theme>. This type indicates support of the accessor styled-components syntax for styling elements (styled.div, styled.span, etc.) but the actual export only supports function syntax (styled('div'), styled('span'), etc.)

✅ This works:

import { styled } from '@mui/material/styles';

const Red = styled('div')`
  color: red;
`;

// 💯

🙈 This does not work:

import { styled } from '@mui/material/styles';

const Red = styled.div`
  color: red;
`;

// TypeError: _mui_material_styles__WEBPACK_IMPORTED_MODULE_6__.styled.div is not a function

Expected behavior 🤔

Either accessor syntax works or the CreateMUIStyled<Theme> type should indicate that the styled export is a function, not an object with accessor properties.

Steps to reproduce 🕹

Steps:

1. Clone and install dependencies in the example cra with styled-components and typescript
2. Try creating a styled component that is a styled('div'), it will work.
3. Try creating a styled component that is a styled.div, it will not work.

Context 🔦

We are looking to introduce material UI to our existing codebase that uses TypeScript and styled-components. It is a must that styled-components work and the types match the exported object.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 10.15.7 Binaries: Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v16.8.0/bin/yarn npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm Browsers: Chrome: 95.0.4638.69 Edge: Not Found Firefox: Not Found Safari: 13.1.3 npmPackages: @mui/base: 5.0.0-alpha.55 @mui/lab: latest => 5.0.0-alpha.55 @mui/material: latest => 5.1.1 @mui/private-theming: 5.1.1 @mui/styled-engine: 5.1.1 @mui/styled-engine-sc: latest => 5.1.0 @mui/system: 5.1.1 @mui/types: 7.1.0 @mui/utils: 5.1.1 @types/react: latest => 17.0.35 react: latest => 17.0.2 react-dom: latest => 17.0.2 styled-components: latest => 5.3.3 typescript: latest => 4.4.4 ``` tsconfig.json ``` { "extends": "./tsconfig.paths.json", "compilerOptions": { "target": "es5", "module": "esnext", "jsx": "react-jsx", "noEmit": true, "strict": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "allowSyntheticDefaultImports": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "skipLibCheck": false }, "include": [ "src/**/*" ] } ```

[andyGallagher]

I'd also like to suggest that the linked example should actually use styled-components, as it currently does not. Please let me know if you would like for me to open a PR for that.

[dalechyn]

Also affected by this issue