Outlined variants of paper have wrong background-color in dark-mode when resting on an elevated paper

[MrEbbinghaus]

tl;dr
I propose to respect the elevation prop for outlined variants of paper with regard to the background color. (Paper becoming lighter with elevation)

---

An outlined paper sitting on top of an elevated paper should have a relative elevation of 0.
In the current implementation, the elevation of outlined paper is absolute.

In light mode, this is fine, since the background color doesn't change.

In dark mode, paper(/material) gets lighter the higher it is.
But since an outlined paper is always at elevation 0, the background color won't get lighter.

This leads to outlined variants "punching a hole" into the paper it is resting on:

How it should look like:

Possible ways of dealing with this issue

(First the more complicated, but more general solution.

1. Properly stacking of paper.
   Keep track of the current absolute elevation of a sheet of paper based on the elevation the paper is sitting on, and setting the background color based on that.
   I don't know how best to accomplish this. Ideas on how to do this:
   • Nested CSS
   • Keeping an elevation context
   • Using a transparent background.

This would solve the problem of non-outlined paper on paper, which is currently wrong as well.
(However, for non-outlined paper, this is less of a problem, as you can manually set the elevation prop to fix this issue)

2. The easy workaround:
   Respect the elevation prop for outlined variants with regard to the background color.
   (This does not have to be a dark mode exclusive solution.)

---

Related:
#21748 #18309

[MrEbbinghaus]

Change https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/Paper/Paper.js#L38 to:

const PaperRoot = styled('div', {
  name: 'MuiPaper',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    const { ownerState } = props;

    return [
      styles.root,
      styles[ownerState.variant],
      !ownerState.square && styles.rounded,
      styles[`elevation${ownerState.elevation}`],                    // <- Change here
    ];
  },
})(({ theme, ownerState }) => ({
  backgroundColor: theme.palette.background.paper,
  color: theme.palette.text.primary,
  transition: theme.transitions.create('box-shadow'),
  ...(!ownerState.square && {
    borderRadius: theme.shape.borderRadius,
  }),
  ...(ownerState.variant === 'outlined' && {
    border: `1px solid ${theme.palette.divider}`,
  }),
  ...(ownerState.variant === 'elevation' && {
    boxShadow: theme.shadows[ownerState.elevation],
  }),
  ...(theme.palette.mode === 'dark' && {                                // <- Change here
    backgroundImage: `linear-gradient(${alpha(
      '#fff',
      getOverlayAlpha(ownerState.elevation),
    )}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`,
  }),
}));

This would do the trick, wouldn't it?
(I would open a PR with this, but I am not really a Javascript Dev, and I am not familiar with this project.)

[ashfaqnisar]

Hey @MrEbbinghaus,
Was having the same issue with the paper component. The colour was becoming lighter than the colour I provided.
The colour provided to the component was #1d1d1d but it was turning into #2c2c2c

I have added images for reference.
Present Behaviour:

Expected Behaviour:

For the workaround, I removed the background image style on the paper by overriding it.

[Cristy94]

Any updates? The paper color in dark mode is different after upgrading, even with backgroundImage set to none

v4:
Paper background is: #424242

v5:
Paper background is: #121212

Edit: as a fix, I manually set the paper background to '#424242':

const darkPalette: PaletteOptions = {
    mode: 'dark',
    primary: {
        main: '#35a8d4',
    },
    background: {
        default: '#222',
        paper: '#424242',
    },
    secondary: {
        main: '#e656d4',
    }
};

Seems to be mentioned here: https://mui.com/material-ui/migration/v5-component-changes/#default-background-colors

I am still trying to figure out why some text is still not changed from black to white in dark mode.

[MrEbbinghaus]

@eps1lon You tagged this issue with new feature. I would rather categorize this as a bug and design: material, as it "violates" the material2 guidelines.

[Zamlos]

Exact same issue. If you accumulate paper over paper (all of them transparent), the ones on top gets clearer and clearer.

I am using MUI material v 5.11