ListSubheader can no longer be styled to match the background color of dark-mode Paper components

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using dark mode, if a List is created with ListSubheaders (that are sticky, the default) and placed inside of a Paper (or Card) component, the sticky headers cannot be made to match the background color of the Paper. This leads to an awkward-looking list, with inconsistent background colors:

One could change the entire List to have a different background-color than the Paper (and use that for the ListSubheaers), but that is also awkward/non-ideal, as that visually separates the list from everything else.

Expected behavior 🤔

It should be possible to consistently create a List with sticky subheaders where list items, list subheaders, and the rest of the paper all have the same background color.

Steps to reproduce 🕹

Demo:

https://codesandbox.io/s/pinnedsubheaderlist-material-demo-forked-0q1n4?file=/demo.js:438-448

Steps:

1. Set the theme to dark mode
2. Create a Paper component (with default elevation)
3. Put a List with ListSubheaders inside the Paper component
4. Observe that the background-color of the subheaders does not match the background-color of the Paper component or the rest of the list

Context 🔦

The main problem here is that in dark mode in MUI v5, elevated Paper does not use a fixed background-color, but rather uses a background-image to apply different color depending on the elevation (per https://github.com/mui-org/material-ui/pull/25522). ListSubheaders set background.paper as its background color:
https://github.com/mui-org/material-ui/blob/a9903917f919092f80d84075f39fb51d51f241f2/packages/mui-material/src/ListSubheader/ListSubheader.js#L65

One would expect that you should be able to match the background color of the Paper so that all content within the List and the rest of the paper has the same background color. This is related to this other open issue, about styling custom components: https://github.com/mui-org/material-ui/issues/27980

Your environment 🌎

  System:
    OS: macOS 11.6
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.10 - ~/repos/project/frontend/node_modules/.bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 91.0.1
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.62
    @mui/icons-material: ^5.2.5 => 5.2.5
    @mui/lab: ^5.0.0-alpha.62 => 5.0.0-alpha.62
    @mui/material: ^5.2.6 => 5.2.6
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.6
    @mui/styles: ^5.2.3 => 5.2.3
    @mui/system: ^5.2.6 => 5.2.6
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @mui/x-data-grid: ^5.2.1 => 5.2.1
    @types/react: ^17.0.19 => 17.0.19
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.4.3 => 4.4.3

Start with the linked CodeSandbox reproduction in demo.js, then inspect packages/mui-material/src/ListSubheader/ListSubheader.js at the referenced line and compare it with Paper's dark-mode elevation styling. Done means sticky ListSubheaders, list items, and the surrounding Paper visibly share the same background in dark mode without requiring an awkwardly different List background.