CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uitypography
user12541823
user12541823

Reputation:

How to Change Colour of Material UI Typography?

I want to change the colour of only this typography to red. Is that possible? 

return <Typography color='primary'>Login Invalid</Typography>

I found this online but I am not sure how to use it since there's no theme={colortheme} property on Typography itself and that gives me an error. I don't want to change the entire theme from ThemeProvider.

const colortheme = createMuiTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});
``

Upvotes: 3

Views: 6642

Answers (1)

gqstav
gqstav

Reputation: 2082

I think the best way to do this is to wrap ThemeProvider around the Typography component, I created a sandbox for it here here https://codesandbox.io/s/blue-smoke-4zdnu. Essentially you want to

return (
    <ThemeProvider theme={colortheme}>
      <Typography color="secondary" variant="h1">
        Login Invalid
      </Typography>
    </ThemeProvider>
  );

Upvotes: 2

Related Questions