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.给出的公式计算字体大小。

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

Answer 1

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

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

series<- series[order(series$type, decreasing=T),]

我已经注意到，如果您使用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元素，则有时格式不适用（使用material-ui ??的错误）。因此，我最终创建了一个全局类，该类适用于所有覆盖主题样式的元素。

PAPER

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

1 个答案: