如何更改材质 UI 版式的颜色？

Question

我只想把这个排版的颜色改成红色。那可能吗？

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

我在网上找到了这个，但我不确定如何使用它，因为 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>
  );