材料用户界面的 v5 数据网格中的筛选器图标

Question

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

Codesandboxhttps://codesandbox.io/s/mui-datagrid-filter-icon-7rbrk

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

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

Answer 1

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

const MyStyledGrid = styled(DataGrid, () => ({
[`& .${gridClasses.iconButtonContainer}`] : {
visibility: "visible", 
width: "auto"
}
}))
function MyComponent() {
return (
<MyStyledDataGrid {...props} />
)
}