MUI White-Label and Multi-Theme Systems

Nested ThemeProvider

MUI's ThemeProvider can be nested. Inner providers merge with or override the outer theme. Use this to scope different visual treatments to different sections of the app.

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';

const mainTheme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    background: { default: '#fafafa' },