Page Comparison

...

2. In this file, make two new objects, one calledmyThemeLightand the other calledmyThemeDark. We will use these to separate out light and dark mode colours.

...

// Light palette
const myThemeLight = {

};

// Dark palette
const myThemeDark = {

};

export { myThemeLight, myThemeDark }

3. Import the createTheme function from@mui/material/styles. This will generate a theme based on the options received.

...

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

// Light palette
const myThemeLight = {

};

// Dark palette
const myThemeDark = {

};

export { myThemeLight, myThemeDark }

4. Import baseTheme, and use the spread operator to gain all styles from the base file.

...

import { createTheme } from "@mui/material/styles";
import baseTheme from "./baseTheme";

// Light palette
const myThemeLight = {
  ...baseTheme
};

// Dark palette
const myThemeDark = {
  ...baseTheme
};

export { myThemeLight, myThemeDark }

5. Define a colour palette, and specify what mode this colour palette is for:“light"or“dark"

...

const myThemeLight = createTheme({
  ...baseTheme
  palette: {
    main: "#.....",
  },
})

6. Repeat for the other mode.

7. For adding styles to typography or components, import the mergeThemeStyleshelper function. This can be used to add on to existing typography styles in thebaseTheme. It can also be used to add new colour styles without specifying them in thebaseTheme.

...

import { mergeThemeStyles } from "src/helpers/mergeThemeStyles";

typography: mergeThemeStyles(baseTheme.typography, {
  h1: {
    // specify styles here...
  }
})

Adding colours to components

...

1. Find the CSS to target through the Material UI docs, or the CSS inspector

2. Add colour within relevant class

MuiButton: {
  styleOverrides: {
    root: {
      backgroundColor: "purple"
    }
  }
}

One-off customisations and components

For one-off customisations (e.g. setting one button to be pink) the sx prop should be used. The sx prop is just like using style, and can be used with any Material UI component.

Colours should not be defined within the sx prop, but should instead be defined within the theme and referred to using the useTheme hook.

1. Define colour within the theme

  palette: {
    main: "#.....",
    myButtonBackground: "#FFC0CB"
  }

2. Import useTheme into component, and reference the colour in the sx prop

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

export default function ButtonRenderer() {
  const theme = useTheme();
  
  return(
    <Button sx={{ backgroundColor: theme.palette.primary.myButtonBackground }}>
      I am a pink button
    </Button
  )
}

Custom CSS classes for increased specificity

This may require further testing.

This can be used when variants, or the default classes of a component, are not enough. An example of where custom CSS classes may be used, could be when creating a variation of a variant that uses the same styles, but applies some additional styles on top.

1. Choose a name for the class

...

1. , and specify the styling. Make sure to use the&.before it.

"&.RedContainedButton": {
  backgroundColor: "red"
}

2. Add the classname prop to the component

<Button variant="contained" className="RedContainedButton"> Red contained button</Button>