White Label React with Material UI ThemeProvider

Material UI (MUI) Theming

Most developers that use Material UI alongside React.js services are familiar with applying styles to components. For instance, using styled allows us to give instances of component-specific properties. This is great for basic CSS customization. You can change colors, fonts, typography, etc. As your application grows, you typically see the need for a more sophisticated CSS system. Style guides are a great way to establish a system of communication between UI designers and front-end developers. When you want to apply a global set of styles to MUI, we can take things one step further by using the MUI ThemeProvider instead of the styled clause.

What is the Material UI ThemeProvider?

React’s Material UI ThemeProvider (not to be confused with the ThemeProvider from styled-components) is a React component that uses Contexts to allow you to apply global styles to your React application. In short, using a Material UI ThemeProvider allows you to configure your fonts, colors or palettes, spacing, typography, and other key areas of your Material UI application. Material UI components use Context to apply your theme to themselves. This means that not only can you create new, custom components with your theme, but any changes you make to your theme will be applied to default Material UI components. Essentially, the Context that Material uses to store your theme (which is created using createTheme) passes your styled down the component tree below the respective ThemeProvider.

In this post, we will take a look at how to use the MUI ThemeProvider in a branded or Whitelabel application. The central idea here is to create two different themes. The first theme will be your base theme that applies to all instances of your application. You can think of these as a global styleguide. It is a set of default variables like colors, spacing, or component-specific properties that MUI will apply to all versions of your Whitelabel application. Next, we will create a Whitelabel theme, which will be responsible for applying Whitelabel-specific (or brand-specific) properties to your base theme. Let’s take a look below.

Step 1: Create a Material UI Theme

In this step, we will create a standard Material UI Theme and apply it to our application. The point here is to get the base theming functionality from MUI by applying a color palette to our application. We don’t want to replace the base theme; we want to extend it.

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const baseTheme = createTheme({
    spacing: 1
  });

  return (
    <ThemeProvider theme={baseTheme}>
      <MyComponent /> // HERE, SPACE IS 1px
    </ThemeProvider>
  );
}

export default App;

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const baseTheme = createTheme({
    spacing: 1
  });

  return (
    <ThemeProvider theme={baseTheme}>
      <MyComponent /> // HERE, SPACE IS 1px
    </ThemeProvider>
  );
}

export default App;

Step 2: Create a Whitelabel Theme

 Next, we need to be able to apply brand-specific or Whitelabel attributes to our theme. To do this, we will create a second theme. The code below is very similar to the baseTheme code, and in the next step, we will show how to make the two themes work together.

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const whitelabelTheme = createTheme({
    spacing: 2
  });

  return (
    <ThemeProvider theme={whitelabelTheme}>
      <MyComponent /> // HERE, SPACE IS 2px
    </ThemeProvider>
  );
}

export default App;

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const whitelabelTheme = createTheme({
    spacing: 2
  });

  return (
    <ThemeProvider theme={whitelabelTheme}>
      <MyComponent /> // HERE, SPACE IS 2px
    </ThemeProvider>
  );
}

export default App;

Step 3: Nesting Material UI Themes

The key to getting Material UI to apply your Whitelabel theme to your base theme is to nest your Whitelabel ThemeProvider underneath your base ThemeProvider in the component hierarchy. In the example below, we use createTheme two create two different MUI themes.

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const baseTheme = createTheme({
    spacing: 1
  });

  const whitelabelTheme = createTheme({
    spacing: 2
  });

  return (
    <ThemeProvider theme={baseTheme}>
      <MyComponent /> // HERE, SPACE IS 1px
        <ThemeProvider theme={whitelabelTheme}>
          <MyComponent /> // HERE, SPACE IS 2px
        </ThemeProvider>
      </ThemeProvider>
    );
}

export default App; 

import MyComponent from './MyComponent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const App = () => {
  const baseTheme = createTheme({
    spacing: 1
  });

  const whitelabelTheme = createTheme({
    spacing: 2
  });

  return (
    <ThemeProvider theme={baseTheme}>
      <MyComponent /> // HERE, SPACE IS 1px
        <ThemeProvider theme={whitelabelTheme}>
          <MyComponent /> // HERE, SPACE IS 2px
        </ThemeProvider>
      </ThemeProvider>
    );
}

export default App; 

When we render MyComponent the first time, it takes spacing from the base theme. When we render it the second time, it takes spacing from the Whitelabel theme:

Summary

Material UI is a great resource for theming your application. At Flatirons Development, we like to take style guides built by our UX and UI designers in Figma and apply them right to a Material UI theme using createTheme. Nested Material UI themes provide a great way to take a base set of CSS properties, and then apply brand-specific properties to them.