I'm working on a React application that utilizes Material UI. I've implemented my own theme override (see snippet below), but the font color needs to be changed to purple #391960 instead of rgba(0, 0, 0, 0.87). How can I adjust the default font color for the entire site?
Here's a portion of my customized theme:
import { createMuiTheme } from "@material-ui/core";
const theme = createMuiTheme({
palette: {
text: {
light: "#ffffff",
main: "#391960",
dark: "#140b1d",
},
});
export default theme;
I expected adding the above code in my theme.js file to update all font colors to #391960 since I haven't applied any specific styles to the fonts within the components. For instance:
import theme from "./styles/theme";
<ThemeProvider theme={theme}>
<Typography variant="h1" component="h1">
Page Title
</Typography>
</ThemeProvider>
However, the text inside the Typography component mentioned above remains a dark grey. While I am able to modify the size of this typography component using the following code, proving that the theme is being imported correctly:
typography: {
h1: {
fontSize: "2rem",
fontWeight: 700,
},
If setting the site-wide color through the theme.js file isn't possible, I was considering creating a global stylesheet that somehow fetches the correct color from the theme. For example (though I know it won't work!)
body {
color: theme.palette.main
}
Any assistance would be greatly appreciated!
Thank you,
Katie