如何移除MUI X Data Grid表头（Thead）中的三个点？

Hey there! Let's tackle this MUI Data Grid feature removal issue you're facing. Using the root class not working is super common—usually because MUI's inline styles or higher-specificity selectors are overriding your changes. Here are a few reliable approaches depending on which feature you're trying to remove:

Most extra features in MUI Data Grid can be turned off directly using built-in props, which is way cleaner than hacking styles. For example:

• To remove the pagination component: Set pagination={false} on your DataGrid component
• To hide the filter panel: Use disableColumnFilter={true} or filterMode="none"
• To remove the export button: Pass disableExport={true}
• To hide the toolbar entirely: Add components={{ Toolbar: () => null }}

Example code snippet:

<DataGrid
  rows={yourRows}
  columns={yourColumns}
  pagination={false}
  disableColumnFilter={true}
  disableExport={true}
  components={{ Toolbar: () => null }}
/>

If the feature can't be disabled via props (or you need more granular control), fix your root style issue by increasing selector specificity. MUI uses nested classes, so targeting the exact feature class with a parent selector usually works.

For example, if you're trying to hide the "Columns" button in the toolbar:

import { styled } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  '& .MuiDataGrid-toolbarContainer .MuiButtonBase-root': {
    // Target the specific button you want to hide using its aria-label or class
    '&[aria-label="columns"]': {
      display: 'none',
    },
  },
}));

// Then use the styled component instead of the default DataGrid
<StyledDataGrid rows={rows} columns={columns} />

Pro tip: Use your browser's dev tools to inspect the element and find the exact class name or attribute MUI uses for the feature you want to remove—this avoids guessing and ensures your styles target the right element!

For more complex cases (like modifying the toolbar to keep some features but remove others), override the relevant component entirely. For example, creating a custom toolbar that excludes specific buttons:

import { GridToolbarContainer, GridToolbarExport, GridToolbarFilterButton } from '@mui/x-data-grid';

const CustomToolbar = () => {
  return (
    <GridToolbarContainer>
      {/* Keep only the components you need—omit the ones you want to remove */}
      <GridToolbarFilterButton /> {/* Keep filter button */}
      {/* <GridToolbarExport /> */} {/* Remove this line to hide export button */}
    </GridToolbarContainer>
  );
};

// Use your custom toolbar in the DataGrid
<DataGrid
  rows={rows}
  columns={columns}
  components={{ Toolbar: CustomToolbar }}
/>

内容的提问来源于stack exchange，提问作者undecidedmess