Material-ui-pickers: [Help needed] Font size

Created on 11 Mar 2018 · 5Comments · Source: mui-org/material-ui-pickers

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | ^1.0.0-rc.2 |
| material-ui | ^1.0.0-beta.36 |
| React | ^16.2.0 |

Hi, I'm having issue with font size for both the text in DateTimePicker & Input. Both of the font size are too small and I'm unable to find a way to adjust them (show in photo below).

Font size for text in calendar is too small

screen shot 2018-03-11 at 10 38 44 pm

Font size for value is too small

screen shot 2018-03-11 at 10 38 49 pm

I understand that they are labelClassName and helperTextClassName but I can't seem to change the style for text in calendar and input value. Any feedback or advice is highly appreciated! Thanks in advance :D

docs question

Source

darylong

Most helpful comment

I had the same problem because i use:

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

I solved with this (as shown in material ui documentation):

const theme = createMuiTheme({
  typography: {
    // ...
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
    // ...
  },
});

jmdsg on 29 Apr 2019

👍2 🎉1

All 5 comments

@darylong Please provide sandbox and try to reproduce it. We are actually depends on material-ui theme, but they are using em and rem so I can advice you check the font-size of <html> tag.

dmtrKovalenko on 11 Mar 2018

@darylong https://material-ui-pickers.dev/guides/css-overrides is an example of how to change styling of any pickers control

dmtrKovalenko on 22 Mar 2018

I had the same problem because i use:

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

I solved with this (as shown in material ui documentation):

const theme = createMuiTheme({
  typography: {
    // ...
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
    // ...
  },
});

jmdsg on 29 Apr 2019

👍2 🎉1

It is already fixed in v3

dmtrKovalenko on 29 Apr 2019