Removing a css property from the theme (override) without impacting another

[RemyMachado]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: codesandbox

Steps:

1. Use the ThemeProvider with the default theme
2. Try to remove the MuiCardContent-root:last-child style (padding-bottom)
3. It impacts the default MuiCardContent-root style (padding)

Current behavior 😯

Currently, when I try to remove the padding-bottom from MuiCardContent-root:last-child it impacts the padding of MuiCardContent-root. I can't find out a way to remove this css property without overriding the default padding value.

Expected behavior 🤔

We should be able to opt-out from a theme's css property, without impacting other css properties.

In this particular case I would expect the default padding to be kept intact:

.MuiCardContent-root {
    padding: 16px;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px; /* should be intact */
    padding-left: 16px;
}

Context 🔦

I'm trying to remove the padding-bottom: 24px from the CardContext component (&last-child).

The problem is that it impacts the default padding: 16px. When trying to unset the padding-bottom it removes the default padding.

Your environment 🌎

Latest.

[siriwatknp]

The only way to have that experience is to adopt CSS variables to components (so that the value can fallback to the initial one) but it depends on the use case if it is worth adding them.

[RemyMachado]

I'm currently using a custom CSS variables process (duplicating the theme to make it available in css modules stylesheets), but the initial value can't be erased. Do you have an example of what you are referring to? @siriwatknp

[eloiqs]

I'm trying to achieve the exact same thing. Any idea why MuiCardContent has a different bottom padding when it's the last child?

[siriwatknp]

@RemyMachado @eloiqs Here is one example:

Screen.Recording.2566-04-28.at.09.42.32.mov

// the component
const Div = styled('div')`
  --p: 1rem;
  --p-last: 1.5rem;
  padding: var(--p);
  &:last-child {
    padding-bottom: var(--pb-last, var(--p));
  }
`

By default, the last component's padding-bottom will be 1.5rem because of --p-last.

To ignore the --p-last and let it fallback to the --p, set the value of --pb-last to unset.

<Div sx={{ '--pb-last': 'unset' }}>

https://codepen.io/siriwatknp/pen/qBJjYXM

[RemyMachado]

@siriwatknp I'm not sure I understand the relevance of your example, which doesn't use MUI. MuiCardContent-root:last-child doesn't have an editable CSS variable in the theme to achieve what you showed us...
This issue should be addressed using theme customization.