Some MUI (https://mui.com/) components not working as expected in Storybook

[javiervalero]

Describe the bug

Some Material UI react components, like <Select />, are not displaying some specific DOM elements that render at body level.

For example, when clicking the <Select /> component to select an option from the menu, the option menu does not show up. It looks like the MUI React component is not working, but in fact the root cause is that the output is being hidden by a storybook CSS rule.

body > * {
    display: none !important;
}

It looks like this rule is defined at the http://localhost:6006/iframe.html level

To Reproduce

Using Storybook v6.4.22 just create a story for the default MUI Select component example.

https://mui.com/material-ui/react-select/#BasicSelect.tsx

import Box from '@mui/material/Box';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';

export default {
  title: 'Select',
  component: Select,
  argTypes: {
    backgroundColor: { control: 'color' }
  }
} as ComponentMeta<typeof Select>;

const Template: ComponentStory<typeof Select> = () => {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
};

export const Default = Template.bind({});

Run storybook, open the above story and click on the Select component to open the menu.

Expected result: The menu with options should open.
Actual result: The menu does not show up.

Reproduction N/A (Got some errors related to yarn when trying to create it, maybe because my project uses npm ?)

System

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 91.0
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.22 => 6.4.22
    @storybook/addon-essentials: ^6.4.22 => 6.4.22
    @storybook/addon-interactions: ^6.4.22 => 6.4.22
    @storybook/addon-links: ^6.4.22 => 6.4.22
    @storybook/builder-vite: ^0.1.29 => 0.1.29
    @storybook/react: ^6.4.22 => 6.4.22
    @storybook/testing-library: ^0.0.9 => 0.0.9

Additional context

This is a Vite Project created for React and Storybook installed following the instructions here: https://github.com/storybookjs/builder-vite#getting-started-with-vite-and-storybook-on-a-new-project

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).