How do I set a global font colour in React which uses Material UI

Question

I have a React application which is built using Material UI. I have created my own theme override (see extract below), but the colour of the font needs to be purple #391960, not rgba(0, 0, 0, 0.87). How can I override the default font colour across the entire site?

Here is an extract of my theme

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
     text: {
         light: "#ffffff",
          main: "#391960",
          dark: "#140b1d",
    },
});

export default theme;

I hoped the addition of the above in my theme.js file would cause all the font colours to change to #391960 since I haven't applied any styles to the fonts within the components. For example:

import theme from "./styles/theme";

<ThemeProvider theme={theme}>
        <Typography variant="h1" component="h1">
          Page Title
        </Typography>
</ThemeProvider>

However, the text within the above Typography component remains dark grey. I am successfully able to change the size of this typography component with the following code, so this proves that I am pulling the theme into the component correctly:

  typography: {
    h1: {
      fontSize: "2rem",
      fontWeight: 700,
    },

If I can't set the site-wide colour using the theme.js file, I was thinking that I could have a global style sheet which pulls in the correct colour from the theme somehow? For example (and I know this won't work!)

body {
 color: theme.palette.main
}

Any help would be appreciated!

Thanks,

Katie

Answer 1

There are two things that don't allow your theme to be applied effectively.

1. Taking the official docs as reference, these are the current defaults properties for palette.text object

const theme = createMuiTheme({
  palette: {
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.54)',
      disabled: 'rgba(0, 0, 0, 0.38)',
      hint: 'rgba(0, 0, 0, 0.38)',
    },
  },
});

If you want to set a different global primary color then your theme.js file should look like this:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    text: {
      primary: '#391960',
    },
  },
});

export default theme;

Note that you can also can set different colors for the rest of properties (secondary, disabled, hint) if you want to overwrite those too.

2. For both the MUI theme and components to be displayed correctly you need the CSS Baseline component

Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

import React from "react";
import { ThemeProvider, CssBaseline, Typography } from "@material-ui/core";
import theme from "./theme";

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Typography variant="h1" component="h1">
        Page Title
      </Typography>
    </ThemeProvider>
  );
}

Here is a functional CodeSandbox reproduction, I hope it can be of help.