filter icon in material-ui's v5 DataGrid

user_4876257 0
Viewed 1141

The default behavior for the new DataGrid is to hide a filter icon unless you hover over the column header (and have a filter applied). In the previous version the icon remained visible.

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

When a filter is applied it adds a new iconButtonContainer div. The classes are: MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer

Is there a way to override this behavior? All I'd like to do is set visibility to always be visible when that div is generated by the library.

emotion material-ui reactjs css-in-js css
1 Answers

The answer here was to create a separate styled component of the data grid and use the global classnames imported from mui to reference the correct one for the style you wish to override. In my case it was something like:

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

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