[theme/styles] Unable to override MuiTableCell padding

[caub]

demo: https://codesandbox.io/s/vyj481zp05

versions: see demo

I'm doing

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        padding: '40px 24px 40px 16px',
        backgroundColor: 'lightblue'
      }
    }
  }
});

but it's injected before other MuiTableCell styles, so it doesn't override

.MuiTableCell-root-37 {
  padding: 40px 24px 40px 16px;
  text-align: left;
  border-bottom: 1px solid
    rgba(235, 235, 235, 1);
  background-color: lightblue;
}
//...
.MuiTableCell-paddingDefault-40 {
  padding: 4px 56px 4px 24px;
}

[caub]

@mbrookes Thanks, well, I've been reading the whole customization, styles and API docs, and didn't find any way to do it. It's maybe not a bug, if there's an easy solution, but in any case, I'll be glad to improve doc and help, so it can belong here too I think

overrides should override styles right? so it should be placed after other styles

(edited 1st message to make it more clear)

[oliviertassinari]

It could be a bug with the override mechanism, changing the key order on the object which changes the CSS specificity overall.

[oliviertassinari]

My bad, @mbrookes is right, there is no bug.
Just target the right CSS, you still have to account for specificity:

  overrides: {
    MuiTableCell: {
     root: {
        backgroundColor: 'lightblue'
      },
+     paddingDefault: {
+       padding: '40px 24px 40px 16px',
+     },
    },
  },

[goleary]

For anyone that ends up here trying to override the default padding of a TableCell:

It looks like the CSS class paddingDefault was removed, so you now need to override the padding in the root class of MuiTableCell as @caub does at the top of this issue.