Theme Options

MUI's default

With

ThemeOptionsProvider

• set the only required
  ThemeOptions
  at each level in Component Tree
• change the themeOptions at runtime using the hook
  useThemeOptions().setThemeOptions()

Also Implements

At each level of

ThemeOptionsProvider

a new

theme

is created by deep merging ThemeOptions from 1. parentContext, 2. prop, 3. state

Usage

• ThemeOptionsProvider

  import { ThemeOptionsProvider } from "mui-extended";
  
  // wrap all child components
  const component = (
    <ThemeOptionsProvider themeOptions={themeOptions}>
      {children}
    </ThemeOptionsProvider>
  );
  

  Props :

  • themeOptions(Optional) theme options to be overrided

• useThemeOptions
  to update the theme from inside the child components

  import { useThemeOptions } from "mui-extended";
  import { ThemeOptions } from "@mui/material";
  
  // within the child component
  const { setThemeOptions } = useThemeOptions();
  
  const newThemeOptions: ThemeOptions = {
    palette: { primary: { main: "#0000ff" } }
  };
  setThemeOptions(newThemeOptions); // updates primary main color to "#0000ff"