storybookjs/storybook

[Bug]: styled_default is not a function - MaterialUI Grid2

Open

#23,690 opened on Aug 2, 2023

View on GitHub
 (4 comments) (1 reaction) (0 assignees)TypeScript (10,058 forks)batch import
addon: themesbugcompatibility with other toolshelp wantedmui

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

When trying to use Material UI I am graced with the following error: styled_default is not a function.

derived from this code segment in MUI

createStyledComponent: styled_default("div", { name: "MuiGrid2", slot: "Root", overridesResolver: (props, styles) => styles.root }),

To Reproduce

  1. Create a standard storybook project.
  2. Follow the MUI installation setup.

yarn add @mui/material @emotion/react @emotion/styled yarn add @mui/material @mui/styled-engine-sc styled-components

  1. Create a Story for your Grid
import React from "react"
import Grid from "@mui/material/Unstable_Grid2/Grid2"
import { Grid2Props } from "@mui/material/Unstable_Grid2/Grid2Props"

export const MyGrid = ({ children, ...rest }: AUIGridProps) => {
  return (
    <Grid>
      {children}
    </Grid>
  )
}

interface AUIGridProps extends Grid2Props {
  children: React.ReactNode;
}

System

System:
    OS: macOS 13.4.1
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v20.5.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-a11y: 7.2.0 => 7.2.0 
    @storybook/addon-docs: ^7.2.0 => 7.2.0 
    @storybook/addon-essentials: 7.2.0 => 7.2.0 
    @storybook/addon-interactions: 7.2.0 => 7.2.0 
    @storybook/addon-links: 7.2.0 => 7.2.0 
    @storybook/addon-mdx-gfm: 7.2.0 => 7.2.0 
    @storybook/addon-storyshots: 7.2.0 => 7.2.0 
    @storybook/addon-styling: ^1.3.5 => 1.3.5 
    @storybook/addons: 7.2.0 => 7.2.0 
    @storybook/blocks: 7.2.0 => 7.2.0 
    @storybook/react: 7.2.0 => 7.2.0 
    @storybook/react-vite: 7.2.0 => 7.2.0 
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16 
    @storybook/testing-library: 0.2.0 => 0.2.0

Additional context

Screenshot 2023-08-02 at 12 37 48 PM

Contributor guide