Question 417279 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to update style for DataGrid component?

I’m trying to update the style of Columns display option in Material UI but I couldn’t find way to do it
I want to change the input border color and change the color of checkbox

I tried to do it like this

sx={{
  '& .MuiDataGrid-paper': {
            color: theme.palette.secondary.dark,
            '& .MuiDataGrid-panelWrapper': {
              background: theme.palette.secondary.dark,
            },
              '& .MuiOutlinedInput-notchedOutline': {
                borderColor: `${theme.palette.secondary.dark} !important`,
              },
              '& .MuiInputLabel-root.Mui-focused': {
                color: `${theme.palette.secondary.dark} !important`,
              },
            },
}}

enter image description here

Tags:

2

Answers


  1. 0

    You can do it using sx props or overriding default styles with emotions. I would say the best approach is doing it with sx props. But i think in your code you have missed some targeted valid classes. i’ll have the corrected one below according to my knowledge.

     sx={{
  '& .MuiDataGrid-paper': {
    color: theme.palette.secondary.dark,
    '& .MuiDataGrid-panelWrapper': {
      background: theme.palette.secondary.dark,
    },
  },
  '& .MuiOutlinedInput-root': {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.dark} !important`, // Input border color
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.light} !important`, // Hover effect
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.main} !important`, // Focused state
    },
  },
  '& .MuiCheckbox-root': {
    color: theme.palette.secondary.main, // Checkbox color
    '&.Mui-checked': {
      color: theme.palette.secondary.dark, // Checked state
    },
  },
}}
    Login or Signup to reply.
  2. 0

    If the dialog uses portal, it is not rendered inside the datagrid. It is not children of a datagrid, you can’t access it like this & .MuiDataGrid-paper

    Depending of the version of the mui you are using, there are props in datagrid that allow you to pass props to its inner components.

    In version 7:

       slotProps={{
       columnMenu: {
         sx: {
          ...styles here
         }
      }
   }}

    In version 5:

    componentsProps={{
     columnMenu: {
        sx: {
           ...style here
        }
     }
}}

    Your style has to be adapted to the real DOM. You won’t need & .MuiDataGrid-paper selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search