material-ui 的 v5 DataGrid 中的过滤器图标答案

【问题标题】：filter icon in material-ui's v5 DataGridmaterial-ui 的 v5 DataGrid 中的过滤器图标
【发布时间】：2022-02-09 14:22:14
【问题描述】：

新 DataGrid 的默认行为是隐藏过滤器图标，除非您将鼠标悬停在列标题上（并应用了过滤器）。在以前的版本中，图标仍然可见。

代码沙盒https://codesandbox.io/s/mui-datagrid-filter-icon-7rbrk

当应用过滤器时，它会添加一个新的 iconButtonContainer div。类是：MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer

有没有办法覆盖这种行为？我想做的就是将可见性设置为在库生成该 div 时始终可见。

【问题讨论】：

标签： css reactjs material-ui emotion css-in-js

【解决方案1】：

这里的答案是创建一个单独的数据网格样式组件，并使用从 mui 导入的全局类名来引用您希望覆盖的样式的正确类名。就我而言，它类似于：

 const MyStyledGrid = styled(DataGrid, () => ({
    [`& .${gridClasses.iconButtonContainer}`] : {
       visibility: "visible", 
       width: "auto"
     }
 }))

 function MyComponent() {
    return (
       <MyStyledDataGrid {...props} />
    )
 }

【讨论】：

【解决方案2】：

您可以在列定义中使用renderHeader 属性来调整标题单元格的呈现行为

const columns: GridColDef[] = [
{
  field: 'date',
  width: 150,
  type: 'date',
  renderHeader: (params: GridColumnHeaderParams) => (
    <strong>
      {'Birthday '}
      <span role="img" aria-label="enjoy">
        ?
      </span>
    </strong>
  ),
  },
];

这里是official docs

【讨论】：

谢谢。但我不明白这将如何让我说，“当应用了过滤器并且你悬停时，不要隐藏网格的图标过滤器。”我可以看到如何使用您的示例始终在特定列上呈现表情符号，但我无法从中收集到如何做我想做的事情。并让所有列都这样做。甚至在单个列上，我如何渲染他们的 svg 图标并在这些条件下使用 renderHeader？能不能按我说的做。这是他们的行为隐藏/显示他们的图标，可以覆盖吗？对不起，我没有关注。
例如，即使我使用renderHeader用自己的图标渲染自己的div，mui的过滤器图标/悬停行为仍然存在。我什至可以做我想做的事吗？