Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI.

For reference, you can view the official example of the Grid Toolbar components here.

Upon clicking on any of the Grid Toolbar components, a popup/popper is displayed, as shown in the screenshot below.

https://i.sstatic.net/Vby8u.png

My objective is to modify the font sizes of the text within each popup/popper associated with the Grid Toolbar components.

After experimenting with altering the text, I noticed that directly changing the font-size and color properties while inspecting the text in the screenshot resulted in visible changes.

https://i.sstatic.net/rf3mx.png

However, upon attempting to replicate these changes by pasting the selector (e.g., .MuiTypography-body1) in the code, the properties did not update as anticipated.

Here is a snippet of the code:

const CustomGridToolbarColumns = withStyles((theme) => ({
  root: {
    color: "dodgerblue",
    "& .MuiTypography-body1": {
      fontSize: 20,
      color: "red"
    }
  }
}))(GridToolbarColumnsButton);

I am also looking to customize all font-size and color properties within each popup/popper associated with the Grid Toolbar components.

Despite attempting to modify the font-size and color properties directly while inspecting the popup/popper, the changes were not applied, as shown in the screenshot below.

https://i.sstatic.net/1Wbr4.png

The dependencies in the package.json file include:

"@material-ui/core": "^4.12.3",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid-pro": "^4.0.0",

You can access the complete code here.

Therefore, my inquiries are as follows:

  1. How can we modify specific properties within the popup/popper of each Grid Toolbar component?
  2. How can we customize all properties within the popup/popper of each Grid Toolbar component?
javascriptcssreactjsdatagridmaterial-ui

Answer №1

You have the ability to examine the element to identify the component where you should apply the style, named GridPanel. This component serves as the wrapper for the filters and columns panel. For more details on all the component slots, refer here.

V5

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
  componentsProps={{
    panel: {
      sx: {
        '& .MuiTypography-root': {
          color: 'dodgerblue',
          fontSize: 20,
        },
        '& .MuiDataGrid-filterForm': {
          bgcolor: 'lightblue',
        },
      },
    },
  }}
/>

To adjust the styles of the other two GridMenus (density/export), you must target the class name MuiDataGrid-menuList. Currently, using global styles seems to be the only option since customizing the GridMenu component within DataGrid is not supported:

<GlobalStyles
  styles={{
    '.MuiDataGrid-menuList': {
      backgroundColor: 'pink',

      '& .MuiMenuItem-root': {
        fontSize: 26,
      },
    },
  }}
/>

https://codesandbox.io/s/69549390-add-custom-style-inside-datagrid-toolbars-popup-component-material-ui-v5-6zpd5?file=/demo.js

V4

import { DataGrid, GridToolbar, GridPanel } from "@mui/x-data-grid";

const useStyles = makeStyles({
  panel: {
    '& .MuiTypography-root': {
      color: 'dodgerblue',
      fontSize: 20,
    },
  },
});

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
  componentsProps={{
    // GridPanel
    panel: { className: classes.panel },
  }}
/>

<GlobalStyles
  styles={{
    ".MuiDataGrid-gridMenuList": {
      backgroundColor: "pink",

      "& .MuiMenuItem-root": {
        fontSize: 26
      }
    }
  }}
/>

https://codesandbox.io/s/69549390-change-all-font-sizes-inside-data-grid-toolbar-component-material-ui-sc5i8?file=/demo.js

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

Ways to merge several getServerSideProps functions

Within my project, I have two important pages: index.js and other.js. In index.js, there exists a crucial method known as getServerSideProps: export async function getServerSideProps(context) { //code here } The challenge arises when I realize that I ...

javascriptreactjsnext.js

Apollo: An Abundance of Mutations

I'm struggling to find the right solution. I need assistance with incorporating two mutations in my export default. Unfortunately, I'm unsure of the correct approach to achieve this. Current code: import React from 'react'; import gq ...

reactjsgraphqlapollographql-js

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

Error 404: Jquery Fancy Box Not Found

Help needed with JQuery FancyBox: I encountered a 404 error when trying to enlarge small images. Here is the code that I used: <a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/1_b.png" style="margin-right:100px;"><im ...

javascriptjquerycsshtmlfancybox

Transform the appearance of a complex image by altering its color using CSS

In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...

htmlcssimage

Able to display the value when printing it out, however when trying to set it in setState, it becomes

Within my form, there's a function that receives the value: _onChange(ev, option) { console.log(option.key) // Value of option key is 3 this.setState({ dropdownValue:option.key }) // Attempting to set state with 'undefined' as ...

javascriptreactjs

What is the best way to align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

Encountering the "EHOSTUNREACH" error message while attempting to establish a connection to an API through the combination of Axios and Express

Exploring the capabilities of the Philips Hue Bridge API, I delved into sending requests using Postman. To my delight, I successfully authenticated myself, created a user, and managed to toggle lights on and off. Verdict: Accessing the API is achievable. ...

javascriptnode.jsexpressaxiosphilips-hue

What is the best way to update a map loop in JSX?

My sidebar contains buttons with links that target specific div ids, and the URLs end with #id_name. I am trying to display data that corresponds to #id_name in a map loop using this code: <div> {entries.map((item, index) => { if (asPath.end ...

reactjsnext.js

What are the steps for updating an NPM package that was installed from a Git repository?

I'm struggling to understand how to update a package that was installed from a git repository. Let's say I have a package located at git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b3bda094b3bda0b8b5b6fab1 ...

javascriptnode.jsnpm

Learn how to easily send a collection of images to Cloudinary by utilizing Axios and React hook form within a Next.js environment

In the code snippet provided, there seems to be an issue where only a single image is uploaded to the Cloudinary API even though multiple images are specified in the input tag. The frontend logic loops through the event target files and appends them to for ...

reactjsmongodbnext.jsreact-hook-formcloudinary

Sending JavaScript variables to an external CSS file

I've been searching for a solution without much luck. I must admit, my CSS skills are pretty basic. Currently, I am using Muxy.io to manage notifications for my livestreams. The platform allows customization of notifications through HTML and CSS file ...

javascripthtmlcss

Vue.js - I am looking to create dynamic buttons that change color when clicked

I have dynamically created buttons using v-for and now I want the clicked button to change color while the others remain the same. <template> <div id="exam-screen" class="exam jumbotron"> <h1>{{ title }}</h1> <div cl ...

javascripthtmlvue.js

Specifying Size of Icons in HTML and CSS

Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two. https://i.sstatic.net/JtIov.png This snippet demonstrates the HTML code related to this section: < ...

htmlcss

Issue with API causing Redux initial state problems

One issue I am facing is with fetching all products from the database and setting them into the Redux initial state. I created an action called SET_PRODUCTS_LIST where I pass the fetched products as payload in the component (I am using next js). Everything ...

reactjsreduxnext.js

What sets Joomla file inclusion apart from the rest?

Can someone please explain the difference between including a JavaScript script file in the following two ways? I created this within a system plugin in Joomla and included the JavaScript file inside the "onAfterInitialise" function. 1) <script type ...

phpjavascriptjoomlajoomla2.5

Exploring Three.js: How to Integrate and Utilize 3D Models

Hey there! I've been doing a lot of research online, but I can't seem to find a solution that works for me. My question is: How can I integrate 3D models like collada, stl, obj, and then manipulate them using commands like model.position.rotation ...

javascriptimportmodel3dthree.js

NextJS 14 with MUI ThemeProvider Issue in App Router

I am currently working on a NextJS app that utilizes material ui's component library. I attempted to integrate the ThemeProvider at the root of the project (/app/layout.tsx), but it is causing errors that seem unrelated during runtime. TypeError: Cann ...

material-uinext.js14app-router

finding it difficult to display my components when incorporating ROUTE in my ReactJS project

Can anyone help me with the code for app.js? I've been trying to implement ROUTE but my components are not rendering correctly. import './App.css'; import Home from './pages/Home'; import Rooms from './pages/Rooms'; impor ...

javascriptreactjsreact-hooksreact-router

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

I keep encountering a 415 error when attempting to upload a PDF file using fetch(). The PDF file resides in the same directory as the js file, and the name is correct. async function uploadFile(filePath, extension, timestamp) { const url = "https ...

javascriptnode.jsfetch-apihubspot-api