MaterialUI Datagrid的Nextjs:CSS样式不起作用

我正在使用Next.js（v10）和Material UI

我有一个表组件，它工作得很好，直到两件事。过滤（或任何其他组件工具栏）和CSS样式替代。（带MUI createTheme）

这是我的代码，非常简单：

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    // this root seems not to be working
    borderRadius: 15,
    '& .MuiDataGrid-cell': {
      color: 'red',
    },
    "& div.react-grid-Container": {
      color: "red",
      // color: theme.palette.text.color
    },
    '& .MuiDataGrid-row.Mui-even:not(:hover)': {
      backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.04)',
    },
  },
}));


export const Table: FC<table> = ({ data }) => {
  const classes = useStyles();
  
  return (
    <div style={{ height: 500, width: 'auto' }}>
      <DataGrid
        className={classes.root}
        rows={data} // usual data
        columns={columns} // and columns, works fine.
      />
    </div>
  );
}

<MuiThemeProvider theme={theme}>
  <SomeOtherComponents/>
  <CssBaseline />
  <Component {...pageProps} />
</MuiThemeProvider>