Невозможно получить доступ к функции pxToRem в Material-ui для темы - PullRequest
0 голосов
/ 26 октября 2018

Я использую material-ui с React. Я пытаюсь оформить тему моего заявления. К сожалению, библиотека material-ui предоставляет пример light-theme.js (с помощью некоторых средств), но тематические компоненты material-ui полагаются на функции в теме. В частности, функция theme.typography.pxToRem для вычисления преобразований rem.

Как мне предоставить доступ к этим функциям в моей собственной теме?

Теперь я бы прошел этапы переопределения pxToRem и аналогичных в моей теме, но кажется маловероятным, что другие сделали это из-за используемого вложенного замыкания. Что делают другие, чтобы получить доступ к функциям на тему Material-UI?

1 Ответ

0 голосов
/ 28 октября 2018

Материал интерфейса дает нам доступ к переопределению классов CSS с помощью 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>

PS. Я проверил это. это работает как шарм.

Пожалуйста, задайте мне любой вопрос по этому поводу. Рад помочь

...