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.