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

Question

我正在使用material-ui与 react 。我正在尝试为我的应用程序设置主题。不幸的是，material-ui 库提供了一个 light-theme.js 示例(通过某种方式)，但material-ui 主题组件依赖于主题内的函数。具体来说theme.typography.pxToRem function for calculating rem conversions.

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

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

Answer 1

Material UI 使我们能够使用 createMuiTheme 来覆盖 css 类。您必须使用 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>

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

请向我询问有关此的任何问题。很高兴为您提供帮助