Material-ui 不会根据主题改变排版颜色

Question

我正在尝试 material-ui，所以我创建了两个主题：

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

const lightTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

但是当我使用Typography组件时，它的颜色属性不会改变。更重要的是 - 颜色是继承自html所以Typography不知道当前的主题。有没有办法在创建主题或使用默认设置时配置排版颜色？我试图将color道具放在托盘对象中，如下所示：

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

const lightTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

但没有运气。我已经创建了codepen。在那里我发现，如果我降级material-ui到3.1它可以正常工作 -.MuiTypography-body1类设置与主题相对应的颜色属性。

Answer 1

的默认行为Typography是对颜色不做任何处理。这样做的原因是通常颜色由控制背景颜色的相同组件控制。例如，如果您将Typography元素放在一个Paper元素中，Paper将同时控制background-color和color。为了让 html 和 body 元素符合您的主题，您需要使用CssBaseline.

Typography提供color明确控制颜色的道具。Usingcolor="textPrimary"将设置 Typography 的颜色，就像CssBaseline 设置 body 元素的颜色一样。

下面是一个演示行为的工作示例：

import React from "react";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

const lightTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

export default function App() {
  const [topLevelDark, setTopLevelDark] = React.useState(false);
  return (
    <MuiThemeProvider theme={topLevelDark ? darkTheme : lightTheme}>
      <CssBaseline />
      <Button
        variant="contained"
        color="primary"
        onClick={() => {
          setTopLevelDark(!topLevelDark);
        }}
      >
        Toggle Themes
      </Button>
      <div>
        <Typography variant="body1">I'm within the top-level theme</Typography>
        <MuiThemeProvider theme={topLevelDark ? lightTheme : darkTheme}>
          <Paper>
            <Typography variant="body1">
              I'm in a Paper within the nested theme
            </Typography>
          </Paper>
          <Typography variant="body1" color="textPrimary">
            I'm in the nested theme with textPrimary color, but outside of a
            Paper. This makes me hard to read since nothing is setting the
            background-color to something contrasting.
          </Typography>
          <Typography variant="body1">
            I'm in the nested theme outside of a Paper with no explicit color.
          </Typography>
        </MuiThemeProvider>
      </div>
    </MuiThemeProvider>
  );
}

关于使用多个主题的注意事项

在您的代码沙箱示例中，您有两个同级ThemeProvider元素，但是在使用您自己的自定义主题时，自定义主题必须位于顶层。如果您对页面的一部分使用不同的主题，它应该嵌套在您的顶级主题中。如果你有两个顶级 ThemeProvider 元素（即一个都没有嵌套在另一个中），它们都会试图影响全局 Material-UI CSS 类名。这意味着只有其中一个会获胜，而另一个似乎根本不起作用。当 Material-UI 检测到您在嵌套 ThemeProvider 中时，它将在嵌套主题中使用不同的（后缀）类名，并且嵌套主题将按预期工作。

相关回答：

• 使用 Material-UI 主题更改根背景颜色