[styles] Easily allow separate on- and off- Paper styling

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

We’re creating a custom material-ui theme that will live on a blue-ish background. All components that will live on it will use the “dark” theme provided in the docs: white text, white Inputs and Selects.

However, the Paper component will remain white, instead of the dark-grey used in the regular dark theme. This creates an issue where, when using any component on Paper, they will be styled in white, whereas we’d want those components to have a regular black-on-white color.

In the theme, this is what I mean:

createTheme({
  palette: {
    type: 'dark', // Causes color issues on Paper
    background: {
      default: 'blue',
      paper: 'white', // The twist from regular dark theme
    },
    text: whiteVersion, // Causes color issues on Paper
    action: whiteVersion, // Causes color issues on Paper
  }
})

It could be solved if I could provide a theme to all nested Paper components, but I don’t think there’s a way to do that?

Examples

Quite simply, a blue background, with a dark-themed Select (white caret and borders), that opens a list of options on light-themed Paper (white paper with black text).

[Floriferous]

The thing is I never actually use the Paper component directly, I’m talking about other components using Paper, like Menu inside of a Select.

[Floriferous]

Well yes, I understand why things currently happen this way, but do you understand my use case?

I’d like to keep Dropdowns, Menus, Dialogs, Cards, etc. to preserve their white background, while the rest of the app lives on a color that requires Dark styling.

And to address your last comment specifically: I keep the background.default to a dark-ish color, but background.paper remains white. Maybe this is an “illegal” setup according to you?

A complex thing like this could solve it: allow nested palette objects in createTheme, but it’s a bit weird:

createTheme({
  palette: {
    type: 'dark', // Causes color issues on Paper
    background: {
      default: 'blue',
      paper: 'white', // The twist from regular dark theme
    },
    text: whiteVersion, // Causes color issues on Paper
    action: whiteVersion, // Causes color issues on Paper
  },
  overrides: {
    MuiPaper: {
      palette: {
        type: 'light',
        text: blackVersion,
        action: blackVersion,
      }
    }
  }
})

To me this is a feature request, not a support ticket, since this theme appears not to be possible right now.