Theming: Typography

Example Usage:

The Typography module replaces the use of h1, h2, h3, h4, h5, h6, p... etc like this:

<div>
  {/* The variant keyword is key and differentiates which text element to use*/}
  <Typography variant="h4">
    Modal Title
  </Typography>
  <Typography variant="body1">
    Lorem ipsum dolor amet marfa aesthetic salvia brooklyn farm-to-table art
    party man bun roof party af gentrify. Glossier fingerstache hell of microdosing.
  </Typography>
</div>

Configuration

Material-UI Customizing Typography Docs

You can customize typography components using CSS whenever you wish using classes like this:

<Typography
  classeName={styles.italicBodyStyles}
  variant="body1"
>
  Lorem ipsum dolor amet marfa aesthetic salvia brooklyn farm-to-table art
  party man bun roof party af gentrify. Glossier fingerstache hell of microdosing.
</Typography>

However, if you want to edit the default typography styles you can use the default theme javascript object like this:

export const resourcePrimaryFont = 'Circular';
export const resourceSecondaryFont = 'Lato';
export const resourceTheme = createMuiTheme({
  typography: {
    h1: {
      fontFamily: resourcePrimaryFont,
      fontStyle: 'normal',
      color: resourceMidnightBlue,
      margin: '20px 0px 5px 0px',
      fontWeight: 'bold',
      fontSize: '64px',
      lineHeight: '68px',
      letterSpacing: '-1px',
    },
    body1: {
      fontFamily: resourceSecondaryFont,
      fontStyle: 'normal',
      fontWeight: 'normal',
      fontSize: '16px',
      lineHeight: '24px',
      color: resourceMidnightBlue,
    },
  },
}