React Material UI DataGrid style MuiDataGrid-window within createMuiTheme or makeStyles / styled

user_14849412 0
Viewed 2634

I'm trying really hard to change the css for the .MuiDataGrid-window in MatierialUi DataGrid. Therefore I was following css rules from https://material-ui.com/api/data-grid/

I tried it within createMuiTheme for root it was working fine, but not for window. I also tried a lot of different cominations like MuiDataGrid-window or only 'MuiDataGrid-window' directly under overrides, but nothing worked..

export const theme = createMuiTheme({
  overrides: {
    MuiDataGrid: {
      root: {
        backgroundColor: 'red',
      },
      window: {
        width: '120%',
      },
    },
  }
});

Next try was a styled DataGrid component, which also didn't work out. Both didn't work. A styled component would be my prefered way!

const StyledDataGrid = styled(DataGrid)({
  MuiDataGrid: {
    root: {
      backgroundColor: 'green',
    },
    window: {
      width: '120%',
    }
  }
});

Maybe I'm completely on the wrong way.. But how to style the CSS attributes in MUI's API like .MuiDataGrid-mainGridContainer, .MuiDataGrid-overlay, .MuiDataGrid-columnsContainer, .MuiDataGrid-colCellWrapper etc.

Thanks a lot and maybe it is helpful for somebody else :)

mui-datatable material-ui reactjs css datagrid
1 Answers

If you check the styles applied, window class element has two selectors associated (multiple classes):

.MuiDataGrid-root .MuiDataGrid-window

To apply the styles in children elements, such as, window in grid root, you need to select both of them:

MuiDataGrid: {
  root: {
    backgroundColor: 'red',
    '& .MuiDataGrid-window': {
      backgroundColor: 'green'
    }
  }
}

In documentation the grid component have just one rule name: root

user_83409560
Related