Introduction

This theme uses MUI in combination with Emotion. On this page we try to cover the basics on how to adjust the color palette and other styles.

How it works

MUI's createTheme is used to extend MUI's default styling. Mira is using both the MUI ThemeProvider as Emotion ThemeProvider. This way, global theme variables will be applied to both MUI's components as custom Emotion components.

How to access theme variables from a component:

const CustomComponent = styled.div`
  background: ${props => props.theme.palette.primary.main};
  color: ${props => props.theme.palette.common.white};
  padding: ${props => props.theme.spacing(2)};
`;

const Custom = ({children}) => (
  <CustomComponent>
    {children}
  </CustomComponent>
);

Adjusting theme variables

In the /theme folder you can find all the theme variables. They are categorized by palettes, shadows, typography, overrides and theme variants. You are able to control each on them inndividually. Typography example:

const typography = {
  h1: {
    fontSize: "2rem",
    fontWeight: 600,
    lineHeight: 1.2
  },
  h2: {
    fontSize: "1.75rem",
    fontWeight: 600,
    lineHeight: 1.2
  },
  h3: {
    fontSize: "1.5rem",
    fontWeight: 600,
    lineHeight: 1.2
  },
  //etc
};