storybook [Bug]: styled_default is not a function

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

Open Vercjames opened this issue 1 year ago • 4 comments

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

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

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

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