Material-UI v1：如何为 material-ui v1 中的所有组件设置一个字体大小？

Question

我们在我们的应用程序中使用 1.4.5 material-ui。现在我们尝试为应用程序中的所有组件设置一种字体大小。例如我们想为标题/按钮/段落/列表...设置fontSize: 14px,等等。 这是我们的示例主题配置：

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

const theme = createMuiTheme({
  typography: {
    fontSize: 14,
  },
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

如果您注意到我们尝试在 typography 对象中定义字体大小，但使用此配置，material-ui 会根据 this link. 中给出的公式计算字体大小

我们正在尝试实现 14 像素字体大小的应用程序宽度，但我们找不到执行此操作的选项。一个选项可以是pxToRem 函数，但我不确定我应该如何覆盖该函数以及我的函数应该是什么？另一种选择是在每个组件中定义样式，我认为这有点矫枉过正，因为我们应该能够使用主题对象来做到这一点。 如果您能想到一种全局设置字体大小的方法，请帮助我。 对你的帮助表示感谢。

Answer 1

注意：我不确定为什么有人会否决我的回答，因为我 答案基于 material-ui 文档。这里是the link。请 展开排版部分，你会看到所有字体都是这样的 被设置。请在此处评论拒绝投票的原因。另外，请注意 当我写这个答案时，我使用的是 Material UI 1.4.5

我将发布解决我的问题的解决方案。希望这对其他人也有帮助： 我最终在我的主题的typography 属性中定义了字体大小。这是我在主题中设置它的方式；

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

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
    fontSize: 13,
    display4: {
      fontSize: 13,
    },
    display3: {
      fontSize: 13,
    },
    display2: {
      fontSize: 13,
    },
    display1: {
      fontSize: 13,
    },
    headline: {
      fontSize: 13,
    },
    title: {
      fontSize: 13,
    },
    subheading: {
      fontSize: 13,
    },
    body2: {
      fontSize: 13,
    },
    body1: {
      fontSize: 13,
    },
    caption: {
      fontSize: 13,
    },
    button: {
      fontSize: 13,
    },
  },
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

我注意到如果您使用 Div 而不是 PAPER 元素有时格式不适用（material-ui 的错误？？）。所以我最终创建了一个全局类，我将它应用于覆盖我的主题样式的任何元素。

  overRidefonts: {
    fontSize: 13,
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
  },