Material-ui v5's DataGrid now includes a new filter icon feature

The current default setting for the new DataGrid is to only display a filter icon when hovering over the column header with an applied filter. In contrast, the previous version had the icon visible at all times.

For reference, you can view the Codesandbox example here.

Upon applying a filter, a new iconButtonContainer div is added with the following classes: 

MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer

I am wondering if there is a way to change this behavior. Ideally, I would like the visibility of the icon to remain constant whenever that div is created by the library.

cssreactjsmaterial-uiemotioncss-in-js

Answer №1

To solve this issue, I created a custom styled component for the data grid and utilized the global classnames imported from MUI to target the specific style that needed to be overridden. Here is an example of how it looked in my case:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

javascriptreactjsreact-proptypes

Experiencing difficulties integrating react-moveable with NEXTjs: Error encountered - Unable to access property 'userAgent' as it is undefined

I've been grappling with this problem for the past few hours. I have successfully implemented react-moveable in a simple node.js app, but when I attempt to integrate it into a NEXTjs app, an error crops up: TypeError: Cannot read property 'userAg ...

javascriptreactjsnext.js

To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve th ...

cssreactjstypescriptmaterial-ui

The UseEffect hook continues to run even if the dependency (router.query) remains the same

useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...

javascriptreactjsnext.js

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

htmlcss

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

javascripthtmlcsschar

Unexpected results can occur when using ngClass and CSS with all unset

Within my Angular 4 project, I am utilizing ngClass on an object that contains a CSS class applied with unset: all within it. Despite knowing that ngClass adds its properties, the expected result was for all values to be unset and the style elements from n ...

htmlcssangular

What is the best way to enable the noWrap feature for a Typography component that is within an Alert or AlertTitle component?

My goal is to have a Typography component truncate overflowing text with an ellipsis. However, I am facing an issue where this doesn't work when the Typography component is nested inside an Alert component. Below is a snippet of the code in question: ...

javascriptreactjsmaterial-ui

How come my changes in Next.JS are effective when running 'npm run start' without having to build anew with 'npm run build'?

What could be the reason why my Next.JS code edits are successfully applied when running npm start, but not when using npm build? It's puzzling me. Could I have made a mistake somewhere? ...

node.jsreactjsnext.js

Looking to create a pop-up using javascript, css, or jQuery?

When visiting digg.com and clicking the login button, a sleek in-screen popup appears to input user data. I'm curious about the best way to achieve this on my own site. It is built with RoR and includes some Javascript elements. Searching for "javasc ...

javascriptcsspopup

Tips for defining the types of nested arrays in useState

Looking for guidance on how to define types for nested arrays in a useState array This is my defined interface: interface ToyProps { car: string | null; doll: number | null; } interface SettingsProps { [key: string]: ToyProps[]; } Here is the stat ...

reactjstypescripttypesuse-state

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

javascriptreactjsjson

Is it more beneficial to include a JSON or CSV file in a web application in order to store default data?

In the process of developing a React web application, I am enabling users to select from a predefined list of data in order to generate a version that they can modify as needed. At present, the data is stored in an excel file. My initial plan was to conve ...

jsonreactjsfirebasecsvcreate-react-app

The power of Webpack in handling .css files

mm2:OptionsAPI ivan$ npm -v 6.13.4 When I try to include a .css file, import BaseTable, { Column } from 'react-base-table' import 'react-base-table/styles.css' An error occurs with the following message: ERROR in ./node_modules/rea ...

reactjsnpmwebpack

Targeting props within a Class Component: A Step-by-Step Guide

I am currently working on a MultiStep Form project. On the final page of the form, my goal is to push all the collected data to Firebase. I have been utilizing props and states to pass values from one page to another. However, I'm facing an issue in t ...

javascriptreactjsfirebasereact-props

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

htmlcss

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

javascriptjqueryhtmlcssdom

Is there a way to create a soft light blue backdrop for text using HTML and CSS?

Is there a way to create a light blue background effect behind text using HTML and CSS? You can view the image reference here ...

htmlcssweb

What is the best way to keep a dropdown list menu next to the selected dropdown button as the user scrolls?

I recently encountered a problem similar to the one on this page within my App. Upon selecting the drop-down list, the corresponding menu opens as expected. However, when the user scrolls down the page, the drop-down menu remains in its original position. ...

htmlcssdrop-down-menutinymce