Я использую шаблон в своем проекте React, в котором размер шрифта для элемента HTML составляет 62,5% (хитрость)
В то же время я использую Material UI для своего проекта. Материал пользовательского интерфейса предполагает, что размер шрифта по умолчанию составляет 14 пикселей, но, поскольку мой элемент HTML имеет 62,5%, Размер шрифта всех компонентов пользовательского интерфейса материала смехотворно мал. Чтобы исправить это, я переписал типографику, приведенную ниже
const fontSize = 14;
const htmlFontSize = 10;
const coef = fontSize / 14;
const theme = createMuiTheme({
typography: {
pxToRem: (size) => `${(size / htmlFontSize) * coef}rem`,
},
});
И оборачивая свой компонент APP следующим образом
<MuiThemeProvider theme={theme}> My root app Component </MuiThemeProvider>
Это работает, как и ожидалось, и значения rem увеличиваются для обычные компоненты, такие как Buttons et c, но не работают для компонентов, наследующих значения размера шрифта, например DateTimePicker.
Компонент кнопки с переопределением
Компонент кнопки без переопределения
DateTimePicker Без / с переопределением
У кого-нибудь есть решение для этого? Любая помощь приветствуется, я новичок в пользовательском интерфейсе материала, поэтому, пожалуйста, сообщите мне о любых ошибках в моей реализации, спасибо.