I'm pretty new to MUI, 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?
29 Answers
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, MUI 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?
0If 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" }, },
});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>Set Typography Text Color in Material UI
<Typography gutterBottom variant="h9" component="h2" color="secondary"> {card.unitNumberList}
</Typography>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.
2The 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>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>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.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)} />;
};
