如何设置使用物质用户界面的全局字体颜色？

Question

我有一个React应用程序，它使用Material构建。我已经创建了我自己的主题覆盖(见下面的摘录)，但是字体的颜色需要是紫色#391960，而不是rgba(0，0，0，0.87)。如何覆盖整个网站的默认字体颜色？

以下是我的主题摘录

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
     text: {
         light: "#ffffff",
          main: "#391960",
          dark: "#140b1d",
    },
});

export default theme;

我希望在我的theme.js文件中添加上述内容将导致所有字体颜色更改为#391960，因为我还没有对组件中的字体应用任何样式。例如：

import theme from "./styles/theme";

<ThemeProvider theme={theme}>
        <Typography variant="h1" component="h1">
          Page Title
        </Typography>
</ThemeProvider>

不过，上述排版部分内的文字仍为深灰色。我成功地用以下代码更改了这个排版组件的大小，因此这证明我正确地将主题拖到组件中：

  typography: {
    h1: {
      fontSize: "2rem",
      fontWeight: 700,
    },

如果我不能使用theme.js文件设置站点范围内的颜色，我想我可以有一个全局样式表，以某种方式从主题中提取正确的颜色？例如(我知道这是行不通的！)

body {
 color: theme.palette.main
}

任何帮助都将不胜感激！

谢谢,

凯蒂

Answer 1

有两件事不允许你的主题被有效的应用。

1. 以官方文件为参考，这些是当前palette.text对象的默认属性

const theme = createMuiTheme({
  palette: {
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.54)',
      disabled: 'rgba(0, 0, 0, 0.38)',
      hint: 'rgba(0, 0, 0, 0.38)',
    },
  },
});

如果您想设置不同的全局主颜色，那么您的theme.js文件应该如下所示：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    text: {
      primary: '#391960',
    },
  },
});

export default theme;

请注意，如果您也想覆盖这些属性，也可以为其他属性设置不同的颜色(次要的、禁用的、提示的)。

1. 要正确显示MUI主题和组件，需要使用CSS基线部分。

Material提供了一个CssBaseline组件来启动一个优雅、一致和简单的基线以供构建。

import React from "react";
import { ThemeProvider, CssBaseline, Typography } from "@material-ui/core";
import theme from "./theme";

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Typography variant="h1" component="h1">
        Page Title
      </Typography>
    </ThemeProvider>
  );
}

这里是一个函数式CodeSandbox复制，我希望它能有所帮助。