Repository: material-ui
Issue: ListSubheader can no longer be styled to match the background color of dark-mode Paper components
Labels: new feature,component: Paper

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] 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:

![image](https://user-images.githubusercontent.com/1647130/147885069-66e5abde-7236-4f48-83ff-82b7c2f65e5a.png)

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). `ListSubheader`s 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 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

Using Chrome.

This is on my system, but reproduced with CodeSandbox as well as linked above.

```
  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
```
</details>