MUI DataGrid v7：GridToolbarColumnsButton无法使用sx及slotProps问题求助

如果直接给GridToolbarColumnsButton传sx或用常规slotProps写法不生效，试试以下几种可行方案：

• 自定义Styled组件包装
  用MUI的styled工具直接封装按钮，自定义样式：

  import { styled } from '@mui/material/styles';
  import { GridToolbarColumnsButton } from '@mui/x-data-grid';
  
  const StyledColumnsBtn = styled(GridToolbarColumnsButton)(({ theme }) => ({
    color: '#1976d2',
    border: '1px solid currentColor',
    '&:hover': {
      backgroundColor: theme.palette.grey[100],
    },
  }));
  
  // 在工具栏中使用
  <StyledColumnsBtn />
  

• 通过DataGrid的slotProps正确传递
  要给工具栏里的列按钮传属性，需要在slotProps.toolbar下的columnsButtonProps中配置：

  <DataGrid
    // 你的表格配置项
    slotProps={{
      toolbar: {
        columnsButtonProps: {
          sx: {
            padding: '6px 12px',
            borderRadius: '4px',
          },
          // 如果要配置弹出菜单的样式，用menuProps
          menuProps: {
            sx: {
              '& .MuiMenuItem-root': {
                padding: '8px 16px',
              },
            },
          },
        },
      },
    }}
  />
  

• 直接给按钮传递sx（针对独立使用场景）
  如果是单独使用GridToolbarColumnsButton而非嵌套在默认工具栏中，直接传递sx即可，注意检查是否有样式被优先级更高的全局样式覆盖：

  <GridToolbarColumnsButton
    sx={{
      fontWeight: 600,
      textTransform: 'none',
    }}
  />
  

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