Material UI default theme overrides custom theme

Question

In my application I'm applying a custom theme as described in the Material UI docs.

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';

const App = () => {
  const theme = createMuiTheme({ palette: { primary: { main: 'red' } } });

  return (
    <MuiThemeProvider theme={theme}>
      <Route path="/" component={Home} />
    </MuiThemeProvider>
  );
}

But what happens is that if I apply a Button from the core package, it get's the correct override color (in this case red). But then a re-render happens and suddenly it changes the color to the default Material UI color which is blue.

The odd thing is that if I look in the source code of the page, there are two instances of a style tag applied:

The first style tag contains the 'red' color. But the second style tag contains the default Material UI color (#3f51b5).

I have no idea where to look.

Remi Remi · Accepted Answer · 2020-09-01T13:58:32

Oké. This answer was not at all possible without proper context in the question. But perhaps this can help someone else as well.

Turned out in my application I've used a Button component outside of the ThemeProvider. By doing so the additional style tag was added. Since that one had default styling and because it was used later in the React tree, it overwritten the other Button components.

Now I guess there are two ways to go about this:

Make the styling more specific to the button by using the class
Make it so that the button was added inside the theme provider

I went for the latter.

Material UI default theme overrides custom theme

1 Answers