Material-ui: [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;
}

[mbrookes]

@caub Plase ask how-to questions in Stack Overflow or gitter, and keep Github Issues for bugs or feature discussions.

If you would like to link from here to your question on SO, I'll follow up there.

[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',
+     },
    },
  },

[spencerdcarlson]

I am seeing a similar issue but with MuiCardActions-root

overrides: {
    MuiCardActions: {
      root: {
        display: 'flex',
        justifyContent: 'flex-end',
        padding: 0
      },
    }
  },

flex-end and flex are getting applied, but padding is not

[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.