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 会根据此链接中给出的公式计算字体大小。

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

Answer 1

注意：我不确定为什么有人会否决我的答案，因为我的答案基于material-ui 文档。链接在这里。请展开版式部分，您将看到这就是所有字体的设置方式。请在此评论否决的原因。另外，请注意，当我写这个答案时，我使用的是 Material UI 1.4.5

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

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',
  },