Code snippets with material UI children not rendering correctly

Describe the bug When I pass a MaterialUI component to a story as a child, it doesn’t generate the code snippet correctly

To Reproduce Import:

import Card from '@material-ui/core/Card';

Story:

import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';
import Card from '@material-ui/core/Card';
import { Overlay, IProps } from './Overlay';

export default {
  title: 'Display/Overlay',
  component: Overlay,
  argTypes: {},
  parameters: {
    docs: {
      inlineStories: true,
    }
  },
} as Meta;

const Template: Story<IProps> = (args) => (
  <Overlay {...args}>
    <Card style={{ padding:'12px' }}>
      Dummy Text
    </Card>
  </Overlay>
);

export const Basic = Template.bind({});
Basic.args = {};

Expected behavior

<Overlay>
  <Card
    style={{
      padding: '16px'
    }}
  >
    Dummy Text
  </Card>
</Overlay>

Actual behavior

<Overlay>
  <WithStyles(ForwardRef(Card))
    style={{
      padding: '16px'
    }}
  >
    Dummy Text
  </WithStyles(ForwardRef(Card))>
</Overlay>

System OS: macOS 11.0.1 CPU: (8) x64 Intel® Core™ i7-8557U CPU @ 1.70GHz Binaries: Node: 14.13.0 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 87.0.4280.88 Firefox: 82.0.3 Safari: 14.0.1 npmPackages: @storybook/addon-actions: ^6.1.10 => 6.1.10 @storybook/addon-essentials: ^6.1.10 => 6.1.10 @storybook/addon-links: ^6.1.10 => 6.1.10 @storybook/node-logger: ^6.1.10 => 6.1.10 @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 @storybook/react: ^6.1.10 => 6.1.10

[nikolaidk]

Any news on this problem? In my perspective it doesn’t make sense to avoid the args parameter. Any ideas why it’s not working?

[shilman]

This is the documented behavior of the source block. see the docs.source.type parameter here: https://storybook.js.org/docs/react/writing-docs/doc-blocks#source

I think the issue is that <WithStyles(ForwardRef(IconButton)) color="inherit"> should render as <IconButton color="inherit" />, which would be some kind of custom dynamic snippet rendering specifically for MUI. Given MUI’s popularity, I’d gladly accept a PR for that.