如何在使用 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: {
    h1: {
      fontSize: "2rem",
      fontWeight: 700,
    },

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

body {
 color: theme.palette.main
}

如有任何帮助，我们将不胜感激！

谢谢，

凯蒂

Answer 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;

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

要正确显示 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，希望对你有所帮助

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

How do I set a global font colour in React which uses Material UI

css

styles

jsx

reactjs

material-ui