Question

我在React中使用material-ui。我正在尝试为我的应用程序设置主题。不幸的是，material-ui库提供了light-theme.js示例（通过某种方式），但是material-ui主题组件依赖于主题内的功能。特别是theme.typography.pxToRem function for calculating rem conversions.

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

现在，我将经历重新实现pxToRem以及类似主题的步骤，但是由于使用了嵌套的闭包，其他人似乎不太可能做到这一点。其他人正在做什么以访问Material-ui主题上的功能？

Answer 1

材料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。我已经测试过了它就像一种魅力。

有关此问题，请问我。很高兴提供帮助

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

1 个答案: