setup.tsx

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    background: {
      default: '#262626',
    }
  },
});

import Component from './test'


export default function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <div style={{ colorScheme: 'dark', padding: '2em' }}>
        <CssBaseline />
        <Component />
      </div>
    </ThemeProvider>
  );
}

test.tsx

import * as React from 'react';
import {
  Button,
  Container,
  Switch,
  Box,
  TextField,
} from '@mui/material'


function ButtonGroup() {
  return (
    <div>
      <Button key='1'>test</Button>
      <Button key='2'>test</Button>
      <Button key='3'>test</Button>
      <Button key='4'>test</Button>
      <Button key='5'>test</Button>
    </div>
  )
}

function SwitchGroup() {
  return (
    <Box>
      <Switch size="small" />
      <Switch size="small" />
      <Switch size="small" />
      <Switch size="small" />
      <Switch size="small" />
    </Box>
  )
}

function InputGroup() {
  return (
    <div>
      <TextField key='1' />
      <TextField key='2' />
      <TextField key='3' />
      <TextField key='4' />
      <TextField key='5' />
    </div>
  )
}


export default function Component() {
  const [show, setShow] = React.useState(false)

  return (
    <div>
      <button onClick={() => setShow(!show)}>toggle</button>
      {show &&

        <div>
          <Container>
            <ButtonGroup />
            <ButtonGroup />
            <ButtonGroup />
            <ButtonGroup />
          </Container>

          <Container>
            <SwitchGroup />
            <SwitchGroup />
          </Container>

          <Container>
            <InputGroup />
            <InputGroup />
          </Container>
        </div>
      }
    </div>
  );
}