How to Change Colour of Material UI Typography?

a125 :

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

Gustav :

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>
  );