MuiThemeProvider as an override mechanism for a subtree

[kof]

Given a case: I have 2 types of a Button, first one with rounded corners, second one without. Now in case I want all buttons inside of some subtree use the second type, I would want to use the MuiThemeProvider.

const theme1 = createMuiTheme({
  overrides: {
    Button: {
      root:  {
        borderRadius: 10
      }
    }
  }
}) 

const theme2 = createMuiTheme({
  overrides: {
    Button: {
      root:  {
        borderRadius: 0
      }
    }
  }
}) 

class Subtree extends Component {
  render() {
    return (
      <ThemeProvider theme={theme2}>
        <Button>Click  me hard</Button>
     </ThemeProvider>
    )
  }
} 

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme1}>
        <Subtree />
      </ThemeProvider>
    )
  }
}

In this case, theme2 will overwrite theme1 style sheet.

[oliviertassinari]

In this case, the inner ThemeProvider will be ignored. Any ideas why?

Because we haven't implemented it. The <ThemeProvider /> isn't looking into the context. He is only providing a new one. Hence, the child is overriding the context of the parent.
I think that we should support it.

@nathanmarks What do you think?

[kof]

We need to do here the same like styled-components do

[kof]

Wait, providing a new value on the context would not be an issue in my case. I just learned that the context is a new one for each subtree, so they don't collide when redefined. I thought its a collision because the inner provider overrides mui on the context for everything else, but its not!

[kof]

It turns out the issue is that once you try to override the same component using a provider, it still uses the same style tag and overwrites it completely. cc @nathanmarks

[kof]

Updated the example in main description.

[kof]

We should switch to https://github.com/iamstarkov/theming. It is a unifying theming solution for all styling libs and some of popular once already committed the migration (which is easy).

[nathanmarks]

@kof do you want to have a go at switching it in?

[kof]

I am not sure if I am able to actually do it, because of time but yeah, we should at least discuss and and agree on that.

[oliviertassinari]

Theme nesting is fully supported now. It's all in the documentation.

[andrispraulitis]

@oliviertassinari

Except that overrides are extended which means I have to re-override in every sub tree. I want nested themes where I start completely fresh overrides with createMuiTheme(), is that possible?

My goal is to use Portal for some printing stuff where I simply want plain light theme.

[oliviertassinari]

I start completely fresh overrides with createMuiTheme(), is that possible?

@andrispraulitis Yes, it is. You are in control of how the outer (parent) theme impact the inner (child) theme. This example was made for you: https://material-ui.com/customization/themes/#nesting-the-theme.

[andrispraulitis]

Yes I think I got it now.

const defaultTheme = createMuiTheme()
const theme = outerTheme => defaultTheme

[oliviertassinari]

@andrispraulitis It doesn't need to be a callback. It can be simple object.