如何在使用 Material UI 的 React 中设置全局字体颜色

Question

我有一个使用 Material UI 构建的 React 应用程序。我已经创建了自己的主题覆盖（请参阅下面的摘录），但字体的颜色需要是紫色 #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 组件中的文本仍保持深灰色。我成功地能够使用以下代码更改此版式组件的大小，因此这证明我正确地将主题拉入组件中：

  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;

请注意，如果您也想覆盖这些属性，您还可以为其余属性（辅助、禁用、提示）设置不同的颜色。

2. 为了正确显示 MUI 主题和组件，您需要CSS Baseline 组件

Material-UI 提供了一个 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的功能复现，希望能对大家有所帮助。