无法访问主题的 Material-ui 中的 pxToRem 函数

Question

我正在使用Material-ui和 React。我正在尝试为我的应用程序设置主题。不幸的是，material-ui 库提供了一个 light-theme.js 示例（通过某种方式），但material-ui 主题组件依赖于主题内的函数。特别是用于计算 rem 转换的 theme.typography.pxToRem 函数。

如何在我自己的主题中提供对这些功能的访问？

现在，我将在我的主题上完成重新实现 pxToRem 和类似步骤，但由于使用了嵌套闭包，其他人似乎不太可能这样做。其他人正在做什么来访问material-ui主题上的功能？

Answer 1

Material UI 使我们能够使用createMuiTheme. 您必须使用 将主题传递到您的应用程序MuiThemeProvider。下面是实现它的方法：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const fontSize = 14, // px
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
const htmlFontSize = 16,
const coef = fontSize / 14;

const theme = createMuiTheme({
  typography: {
    pxToRem: size => `${(size / htmlFontSize) * coef}rem`,
  },
});

在你的渲染方法中：

 <MuiThemeProvider theme={theme}>
      <Component />
</MuiThemeProvider>

附言。我已经测试过了。它就像一个魅力。

与此相关的任何问题请询问我。很高兴能帮助你