ALL ARTICLES
SHARE

White Label React with Material UI ThemeProvider

Flatirons
Development
5 min read
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.

Looking for Expert React Development Services?
See how our experts can help you
SCHEDULE A MEETING

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.

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.

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.

Expert React Development Services

Flatirons provides top-rated React development services.

Schedule a Meeting

Get the CEO's Take

Handpicked tech insights and trends from our CEO.

E-mail

Expert React Development Services

Flatirons provides top-rated React development services.

Schedule a Meeting

Get the CEO's Take

Handpicked tech insights and trends from our CEO.

E-mail
Flatirons
More ideas.
Essentials of Digital Product Design
Business

Learn the Essentials of Digital Product Design

Flatirons

Nov 26, 2024
Ruby on Rails Alternatives
Development

10 Ruby on Rails Alternatives You Should Know About

Flatirons

Nov 20, 2024
Practice EHR Integration
Development

Streamline Your Healthcare Practice with EHR Integration

Flatirons

Nov 18, 2024
React Developer Salary
Development

Unlock Your Potential: React Developer Salary Guide

Flatirons

Nov 16, 2024
rails vs python
Development

Ruby on Rails vs Python: Key Differences

Flatirons

Nov 14, 2024
BCM
Development

Understanding Your Car’s BCM – Key Auto Insights

Flatirons

Nov 14, 2024
Essentials of Digital Product Design
Business

Learn the Essentials of Digital Product Design

Flatirons

Nov 26, 2024
Ruby on Rails Alternatives
Development

10 Ruby on Rails Alternatives You Should Know About

Flatirons

Nov 20, 2024
Practice EHR Integration
Development

Streamline Your Healthcare Practice with EHR Integration

Flatirons

Nov 18, 2024
React Developer Salary
Development

Unlock Your Potential: React Developer Salary Guide

Flatirons

Nov 16, 2024
rails vs python
Development

Ruby on Rails vs Python: Key Differences

Flatirons

Nov 14, 2024
BCM
Development

Understanding Your Car’s BCM – Key Auto Insights

Flatirons

Nov 14, 2024
Essentials of Digital Product Design
Business

Learn the Essentials of Digital Product Design

Flatirons

Nov 26, 2024
Ruby on Rails Alternatives
Development

10 Ruby on Rails Alternatives You Should Know About

Flatirons

Nov 20, 2024
Practice EHR Integration
Development

Streamline Your Healthcare Practice with EHR Integration

Flatirons

Nov 18, 2024
React Developer Salary
Development

Unlock Your Potential: React Developer Salary Guide

Flatirons

Nov 16, 2024
rails vs python
Development

Ruby on Rails vs Python: Key Differences

Flatirons

Nov 14, 2024
BCM
Development

Understanding Your Car’s BCM – Key Auto Insights

Flatirons

Nov 14, 2024
Essentials of Digital Product Design
Business

Learn the Essentials of Digital Product Design

Flatirons

Nov 26, 2024
Ruby on Rails Alternatives
Development

10 Ruby on Rails Alternatives You Should Know About

Flatirons

Nov 20, 2024
Practice EHR Integration
Development

Streamline Your Healthcare Practice with EHR Integration

Flatirons

Nov 18, 2024
React Developer Salary
Development

Unlock Your Potential: React Developer Salary Guide

Flatirons

Nov 16, 2024
rails vs python
Development

Ruby on Rails vs Python: Key Differences

Flatirons

Nov 14, 2024
BCM
Development

Understanding Your Car’s BCM – Key Auto Insights

Flatirons

Nov 14, 2024