playground-index.tsx

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { NoSsr, CssBaseline } from '@mui/material';
import '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  palette: {
    mode: 'dark',
    background: {
      default: '#262626',
    },
    DataGrid: {
      bg: '#262626',
      headerBg: '#2a2a2a',
      pinnedBg: '#2a2a2a',
    },
  },
  components: {
    // MuiButton: {
    //   styleOverrides: {
    //     root: () => {
    //       return ({
    //         border: '1px solid red ',
    //       })
    //     },
    //   },
    // },
    // MuiDataGrid: {
    //   variants: [
    //     {
    //       props: { rowHeight: 38 },
    //       style: {
    //         border: '1px solid yellow',
    //       },
    //     }
    //   ],
    //   styleOverrides: {
    //     aggregationColumnHeader: ({
    //       border: '1px solid red ',
    //       '& > div': {
    //         border: '1px solid blue',
    //       },
    //     }),
    //   },
    // },
  },
});

// import Component from './demo-ai'
// import Component from './demo-employees';
// import Component from './demo-datasource-lazy';
// import Component from './demo-full'
// import Component from './demo-virtualization';
// import Component from './demo-autosize';
// import Component from './demo-rowspan';
import Component from './debug';
// import Component from './docs-custom-filter-operator';
// import Component from './issue-stacking-context'

export default function App() {
  if (typeof document !== 'undefined') document.documentElement.style.colorScheme = 'dark';

  return (
    <NoSsr>
      <div style={{ colorScheme: 'dark', padding: '2em' }}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <React.Suspense fallback="waiting for suspense">
            <Component />
          </React.Suspense>
        </ThemeProvider>
      </div>
    </NoSsr>
  );
}