Material-ui根据主题颜色未改变Typography的颜色

Question

Material-ui根据主题颜色未改变Typography的颜色

14

我正在尝试使用material-ui，因此我创建了两个主题：

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

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

但是当我使用Typography组件时，它的颜色属性不会改变。更有甚者 - 颜色从html继承，因此Typography不知道当前的主题。在创建主题时是否有配置Typography颜色的方法或使用默认值的方法？我尝试将color prop放入调色板对象中，就像这样：

const darkTheme = createMuiTheme({
  palette: {
    type: "dark",
    typography: {
       body1: {
           color: '#fff'
       }
    }

  }
});

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

- Kostya Tresko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Cogswell · Accepted Answer

Typography的默认行为是不处理颜色。原因在于通常颜色由控制背景颜色的同一组件控制。例如，如果将Typography元素放置在Paper元素内，Paper将控制background-color和color。为了使html和body元素遵守您的主题，您需要使用CssBaseline。 Typography提供了color属性，可以明确地控制颜色。使用color="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中时，它将在嵌套主题内使用不同的（带后缀的）类名，并且嵌套主题将按预期工作。