css - 如何在使用 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. 参加 official docs作为引用，这些是 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 Baseline component

Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

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 reproduction ，希望对您有所帮助。