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?

Answer 1

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 "@material-ui/core/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?

Answer 2

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"
    },
  },
});

Answer 3

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>

Answer 4

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.

Answer 5

Set Typography Text Color in Material UI

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

Answer 6

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>