Set Typography text color in Material UI

Question

I'm pretty new to Material UI, and I'm trying to set a Typography with a text color like this:

const theme = createMuiTheme({
  palette: {
    text:{
      primary: "#FFFFFF"
    }
  }
});

const WhiteText = (props: { text:string, varient: Variant | 'inherit'}) => {
  return <ThemeProvider theme={theme}>
      <Typography variant={props.varient} align="center" color="textPrimary">{props.text}</Typography>
  </ThemeProvider>
}
...
<WhiteText varient="h3" text="This text should be white"/>

but the text will not change color :/

Am I applying the theme wrong?

The approach you used works fine for me here: https://codesandbox.io/s/white-text-qyli3 — Ryan Cogswell, Mar 09 '20 at 21:44
Hmm, there must be something I am missing in my larger program. Thanks! — Tim, Mar 09 '20 at 22:06

score 68 · Accepted Answer · edited May 18 '23 at 23:47

Though your approach works fine in this sandbox, it is not the approach I would recommend. Instead of nested themes, for customizations like this I would recommend using withStyles as shown below (for v4 of Material UI -- v5 example further down).

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF"
  }
})(Typography);

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <WhiteTextTypography variant="h3">
        This text should be white
      </WhiteTextTypography>
    </div>
  );
}

In v5, Material UI has enhanced the color prop significantly (for all components that have a color prop) to support any color in the theme's palette, so for white you can use common.white:

import React from "react";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <Typography variant="h3" color="common.white">
        This text should be white
      </Typography>
    </div>
  );
}

Related answer: Can you add an additional color in Material UI?

score 50 · Answer 2 · answered Jul 17 '20 at 08:41

50

If you want to set a default color for all Typography elements, but not for other Material UI elements you can try this:

const theme = createMuiTheme({
  typography: {
    allVariants: {
      color: "pink"
    },
  },
});

answered Jul 17 '20 at 08:41

PrzemKon

751
5
4

This is the answer! Thank you!! – Thomas Clayson Dec 14 '20 at 19:50
4

I don't see this in the [theme explorer](https://material-ui.com/customization/default-theme/?expand-path=$.typography) How did you find this out? – papiro Apr 22 '21 at 21:01
This didn't work for me. Anyone else have any luck? – Evan May 20 '21 at 00:06
1

In MUI v5, `createMuiTheme` is renamed to `createTheme`. – NearHuscarl Nov 10 '21 at 06:32
1

That also works for V5. Thank you – Khasky Mar 26 '22 at 18:39
This worked for me in v5. Huge time save, couldn't find this in the docs. – shredGnar Jul 04 '22 at 21:13

NearHuscarl · Answer 3 · 2021-11-10T06:38:48.890

The color prop of Typography is theme aware which is a nice feature of sx prop. This means besides setting the color as usual like this:

<Typography variant="h1" color="#00ff00">

You can reference the themed colors, either from the default palette or a custom palette defined like below:

const theme = createTheme({
  palette: {
    tomato: '#FF6347',
    pink: {
      deep: '#FF1493',
      hot: '#FF69B4',
      medium: '#C71585',
      pale: '#DB7093',
      light: '#FFB6C1',
    },
  },
});

After registering the custom theme in ThemeProvider, you can use it in Typography by specifying the string path of the Palette object to the color value:

<Typography color="tomato">text</Typography>
<Typography color="pink.deep">text</Typography>
<Typography color="pink.hot">text</Typography>
<Typography color="pink.medium">text</Typography>
<Typography color="pink.pale">text</Typography>
<Typography color="pink.light">text</Typography>

Here is a couple of examples of Typograhy using the default colors from the palette:

<Typography color="primary.main">text</Typography>
<Typography color="primary.dark">text</Typography>
<Typography color="primary.light">text</Typography>
<Typography color="secondary">text</Typography>
<Typography color="text.secondary">text</Typography>
<Typography color="text.disabled">text</Typography>

Smack Alpha · Answer 4 · 2022-11-08T07:54:48.817

13

If you don't want to use any themes. You can set it via style Attribute also.

<Typography style={{color:"#00adb5"}}  variant="h3" >My Text</Typography>

For MUI 5, use sx attribute,

<Typography sx={{ color: "#00adb5" }} variant="h3">
   My Text
</Typography>

edited Nov 08 '22 at 07:54

answered Jun 24 '21 at 12:21

Smack Alpha

1,828
1
17
37

score 8 · Answer 5 · edited Jun 19 '21 at 03:56

8

Set Typography Text Color in Material UI

<Typography gutterBottom variant="h9" component="h2" color="secondary">
    {card.unitNumberList}
</Typography>

edited Jun 19 '21 at 03:56

KyleMit

30,350
66
462
664

answered Mar 25 '21 at 11:42

Soma sundara

157
1
2

score 5 · Answer 6 · answered Mar 09 '20 at 20:24

I would try this - Include a typgraphy property in your theme, something like below with an 'h3' variant.

const theme = createMuiTheme({
  palette: {
    text: {
      primary: "#FFFFFF"
    }
  },

  typography: {
    useNextVariants: true,
    fontFamily: "Montserrat",
    h3: {
      fontSize: 33,
      fontFamily: "Montserrat",
      fontWeight: 300,
      color: "#2882F8",
      letterSpacing: "0.0075em",
      verticalAlign: "middle",
      alignItems: "center",
      textAlign: "center"
    }
  }
});

Then the color of your Typography should come directly from the variant="h3" that you just declared inside theme. You dont need to seperately pass the 'color' props to Typgraphy

For a working implementations of this, you can check this Repo of mine, where I am keeping all my Typography variants in a single central global file called globalTheme.js and in the App.js wrapping all the other components within MuiThemeProvider as below

<MuiThemeProvider theme={globalTheme}>

So all Typography component anywhere in the project will have access to the variants that I have declared in that globalTheme.js file.

No dice - I'm using material 4.9 so `MuiThemeProvider` -> `ThemeProvider` and there's no `useNextVariants`, but from what I can tell the theme isn't being applied at all. When I use `typography: {h3: {color: "#FFFFFF"}}` I also get no change in text color — Tim, Mar 09 '20 at 20:44
I would definitely not recommend doing this. Material UI clearly separates palette (colors) from typography (font definitions). I don't think you'd want to mix them by defining color in the typography definition. — Javid Jamae, Sep 25 '20 at 20:47

score 2 · Answer 7 · answered Oct 22 '21 at 10:55

2

First of all, you need to define alternative colors for the text elements.

text: {
  primary: 'rgba(60, 72, 88, 1)',
  secondary: 'rgba(132, 146, 166, 1)',
  disabled: 'rgba(60, 72, 88, 0.38)',
  hint: 'rgba(60, 72, 88, 0.38)',
}

Then you can do the following:

<Typography variant="h1">Lorem ipsum</Typography> // Default text color
<Typography variant="subtitle1" color="textSecondary">dolor sit amet</Typography> // Secondary text color.
<Typography variant="body1" color="secondary">consectetur adipiscing elit</Typography> // Global secondary color.

answered Oct 22 '21 at 10:55

Burak Özdemir

510
8
18

How to make disabled color work? example Not working for me – Michał Wanat Oct 27 '22 at 16:42
I found solution: text: { primary: 'rgba(0, 0, 0, 1)', secondary: 'rgba(0, 0, 0, 0.6)', }, textDisabled: 'rgba(0, 0, 0, 0.3)', – Michał Wanat Oct 27 '22 at 16:46

score 1 · Answer 8 · answered Mar 24 '21 at 11:56

You can try using make styles from the material-ui core to create a custom look for your text which can include the text colour as shown in the example below

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

const useStyles=makeStyles((theme)=>({
text:{
    color:"#ffffff"
}
}));

const classes=useStyles();
<Typography align="center" className={classes.text}>This text should be white</Typography>

score 0 · Answer 9 · answered Nov 22 '21 at 14:48

For those who are still on v4, uses typescript and want to have a typesafe definition can extend mui's Typography like this:

import React, { FC } from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core";
import MuiTypography, { TypographyProps } from "@material-ui/core/Typography";
import clsx from "clsx";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    warning: {
      color: theme.palette.warning.main,
    },
    success: {
      color: theme.palette.success.main,
    },
  })
);

type AdditionalColorKeys = keyof ReturnType<typeof useStyles>;

export type TypographyWithSpacingProps = Omit<TypographyProps, "color"> & {
  color?: AdditionalColorKeys | TypographyProps["color"];
};

export const Typography: FC<TypographyWithSpacingProps> = ({ color, className, ...props }) => {
  const classes = useStyles();
  let colorClass = "";

  if (color && color in classes) {
    colorClass = classes[color as keyof ReturnType<typeof useStyles>];
  }

  return <MuiTypography {...props} className={clsx(className, colorClass)} />;
};

score 0 · Answer 10 · answered Jul 29 '22 at 06:28

0

You can also simply change the Typography's color by adding system props 'sx' like this

<Typography
      variant="h6"
      sx={{
          color: "white",
         }}
>

answered Jul 29 '22 at 06:28

Jon Snow

51
5

Set Typography text color in Material UI

10 Answers10

Linked