Как изменить цвет материала UI Типография?

Question

Я хочу изменить цвет только этой типографии на красный. Это возможно?

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

Я нашел это в Интернете, но я не уверен, как его использовать, так как в самой типографии нет свойства theme = {colortheme}, и это дает мне ошибку. Я не хочу менять всю тему от ThemeProvider.

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

Answer 1

Я думаю, что лучший способ сделать это - обернуть ThemeProvider вокруг Typography компонента, здесь я создал для этого песочницу https://codesandbox.io/s/blue-smoke-4zdnu. По сути вы хотите

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