Skip to content
Search

Mui:Theming

lastmod 2023-03-06created 2023-03-062 edits

Customize MUI with your theme. You can change the colors, the typography and much more.

Custom variables

When using MUI's theme with MUI System or another styling solution, it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: 

const theme = createTheme({
  status: {
    danger: orange[500],
  },
});

WARNING

vars is a private field used for CSS variables support.

It will throw an error if you try to use it like this: 

createTheme({
  vars: { ... },
})

If you are using TypeScript, you will also need to use module augmentation for the theme to accept the above values. 

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

Using the theme in other components 

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

Examples 

import {createTheme} from '@mui/material/styles';

export interface ExtraTheme {
  topBarHeight: number | string;
}

declare module '@mui/material/styles' {
  interface Theme {
    extra: ExtraTheme;
  }
  interface ThemeOptions {
    extra?: Partial<ExtraTheme>;
  }
}

export const STEEL_THEME = createTheme({
  extra: {
    topBarHeight: '48px',
  } as ExtraTheme,
});

export default STEEL_THEME;

When using the theme above: 

import {ThemeProvider} from '@mui/material/styles';
import STEEL_THEME from './themes';

function App() {
  return (
    <ThemeProvider theme={STEEL_THEME}>
      <Box />
    </ThemeProvider>
  );
}

See also

Favorite site

author Zer0 sitemap