The Ultimate Tutorial to Setting MUI Text Color

MUI has several options for setting text color on single components or all components of a type. However, can we set a global text color in Material UI? In this tutorial I will set text color for the Typography component and show how we can set text color for all components.

In this demo we will create an app where all Buttons and Typographies get a custom text color from the theme, and then show a way to set global text color that all components will get if they didn’t pick up the theme color. Here is what we will create:

How to Set MUI Text Color
How to Set MUI Text Color

What is the Default MUI Text Color?

MUI does not directly set a default text color. We can see on the Typography component below that it does not have a text color listed in dev tools. It is simply picking up whatever the browser’s default color is for text.

MUI Typography Default Color
MUI Typography Default Color

I was also unable to set a default text color using the MUI theme. Some components like the Button use the theme’s primary color as the text color, but most components do not. Read the following sections to see how I solved this challenge.

How to Set Text Color for All MUI Typography Components

A common component for displaying text is the Typography component. Instead of setting a global default text color, consider setting a text color only for all MUI Typography components.

Here’s the code to set a default color using the Theme:

//ColorTypography.tsx

export default function ColorTypography() {
  return (
    <>
      <ThemeProvider theme={ColorTheme}>
        <Typography noWrap>Custom MUI Text Color</Typography>
      </ThemeProvider>
    </>
  );
}

//ColorTheme.tsx

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

const ColorTheme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          color: 'orange'
        }
      }
    }
  }
});

export { ColorTheme };

We can customize components.MuiTypography.styleOverrides.root.color and create a default text color for any Typography components wrapped in the ColorTheme. No code is needed the individual typography components.

MUI Typography Color Example
MUI Typography Color Example

Another method to set default Typography component color is to create a Styled Component using the Typography component with a custom color, and then export this Styled Component to the rest of the app.

Here are more Typography styling examples.

How to Set Default MUI Text Color Using Theme Palette

Most components do not pick up text color from the theme palette. The Button is one exception, and even some Button variants do not use the theme palette for their text color.

The outlined variant takes its text color from the theme. We can update theme palette.primary.main to control Button color. Just add the below code to the theme:

palette: {
    primary: {
      main: '#964B00'
    }
  }

With this theme update, we can use a Button and without adding any additional code it will have brown text:

<Button variant='outlined'>Custom MUI Button Text Color</Button>
MUI Theme Palette default color example
MUI Theme Palette default color example

How to Set a Global Default MUI Text Color

The solutions listed in the sections above are more precise than setting a global default text color. If you still want a default text color in MUI, we’ll see how to create one below.

We have to go ‘outside’ of MUI to set a global default text color. This will be done in the App.css file. A common solution in web apps is to target the body element or the root class:

body {
  color:green;
}

However, we can use MUI classes to make a more precise selector. Notice how all four MUI components in this screenshot have a class with -root in the name:

MUI root class syntax
MUI root class syntax

We can use this to create a more precise global color selector. Precision is a good practice. For example, perhaps in the future we will have non-MUI components in our app that should not have the global default color. Here’s the updated selector:

[class*='-root'] {
  color: green;
}

This will override existing text color for the Button and Typography that was pulled from the theme. We can more more precise versions of this global selector that only target div-based components:

div[class*='-root'] {
  color: green;
}

Now if I add a Container component with my Button and Typography, only the text inside the Container is green because it is the only component of these three that uses a div.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.