How to override mui nested component styles in a theme?

Question

I created a mui DataGrid with editable cells. When in edit mode, the input's padding is 0 16px by default as seen by this style that mui generated:

.css-jqsvr8-MuiInputBase-root-MuiDataGrid-editInputCell input {
  padding: 0 16px;
  height: 100%;
}

I'd like to override the padding above to 0 1px inside the theme I created for my DataGrid:

const theme = createTheme({   
  components: {
    MuiDataGrid: {
      styleOverrides: {
        cell: {
          padding: "0 1px",   // MuiDataGrid-cell default is "0 10px"
        },
        . . .
}

I'm at a loss for how to specify a styleOverrides for the MuiInputBase-root-MuiDataGrid-editInputCell above. It was straightforward changing the normal cell padding.

I've read overriding nested component styles but still don't know how to specify overriding this in my theme.

Can someone point me in the right direction? Thanks in advance!

Dumbhead

Answer 1

Try this snippets

MuiDataGrid: {
      styleOverrides: {
        root: {          
          '& .MuiDataGrid-cell, & .MuiDataGrid-cell--editing': {
            //Your CSS goes here
          },       
          },
      },
    },

Govea

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Kaliski

Answer 2

select the class .MuiDataGrid-editInputCell input.

See https://mui.com/x/api/data-grid/data-grid/#classes

    <DataGrid
      sx={{
        '& .MuiDataGrid-editInputCell input': {
          padding: '0 1px',
        },
      }}
    />

Nel