如何在MUI Datagrid列面板全选筛选器时禁用显示全部按钮？

需求：在Datagrid列面板中，当所有列筛选器都被勾选时，禁用“显示全部”按钮，尝试通过CSS查找Mui-disabled类未成功，可通过以下方式实现：

• 监听列可见状态
  借助useGridApiRef获取Datagrid的API实例，用来获取所有列的可见状态：

  const apiRef = useGridApiRef();
  
  // 获取所有列的可见状态数组
  const getAllColumnsVisibility = () => {
    const columns = apiRef.current.getAllColumns();
    return columns.map(col => col.getVisible());
  };
  

• 判断全选状态
  通过数组的every方法判断是否所有列都处于可见（勾选）状态：

  const allColumnsVisible = getAllColumnsVisibility().every(isVisible => isVisible);
  

• 自定义列面板替换默认按钮
  重写ColumnPanel组件，在其中控制“显示全部”按钮的禁用状态：

  import { GridColumnPanel, GridPanelActions } from '@mui/x-data-grid';
  
  const CustomColumnPanel = (props) => {
    const { apiRef } = props;
    const columns = apiRef.current.getAllColumns();
    const allVisible = columns.every(col => col.getVisible());
  
    return (
      <GridColumnPanel {...props}>
        <GridPanelActions>
          <button
            onClick={() => apiRef.current.showAllColumns()}
            disabled={allVisible}
            className={allVisible ? 'Mui-disabled' : ''}
          >
            显示全部
          </button>
          <button onClick={() => apiRef.current.hideAllColumns()}>隐藏全部</button>
        </GridPanelActions>
      </GridColumnPanel>
    );
  };
  
  // 在Datagrid中配置自定义组件
  <DataGrid
    apiRef={apiRef}
    components={{ ColumnPanel: CustomColumnPanel }}
    // 其他原有配置
  />
  

• 补充禁用样式（可选）
  如果默认的Mui-disabled样式未生效，可手动添加CSS：

  .Mui-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  

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