title: How to set material ui date picker size with media query for 4k resolution screen
body: <p>I'm writing an application in React for 4k target device. the only problem is with the Material UI date picker - which seems tiny in 4k screens. How do I set its size with media queries?</p>
  
  <p>Could not find any material on the subject. I tried something ( which is commented in the code I attached in this question.</p>
  
  <pre><code>import MomentUtils from '@date-io/moment';
  import moment from 'moment';
  import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
  import {
    DatePicker,
    MuiPickersUtilsProvider,
  } from 'material-ui-pickers';
  import { greenAccept } from '../../colors';
  
  const theme = createMuiTheme({
    // props: {
    //   MuiWithWidth: {
    //     // Initial width property
    //     ['@media (min-width:2500px)']: { // eslint-disable-line no-useless-computed-key
    //     initialWidth: 'lg', // Breakpoint being globally set !
    //     },
    //   },
    // },
    typography: {
      htmlFontSize: '16px',
      ['@media (min-width:2500px)']: { // eslint-disable-line no-useless-computed-key
        fontSize: '32px',
      },
    },
    overrides: {
      MuiPickersToolbar: {
        toolbar: {
          backgroundColor: `${greenAccept}`,
        },
      },
      MuiPickersDay: {
        isSelected: {
          backgroundColor: `${greenAccept}`,
          '&amp;:hover': {
            backgroundColor: `${greenAccept}`,
          },
        },
        current: {
          color: `${greenAccept}`,
        },
      },
      MuiPickersModal: {
        dialogAction: {
          color: `${greenAccept}`,
        },
      },
    },
  });
  
  
  class DatePickComponent extends React.Component {
    handleDateChange = (date) =&gt; {
      this.setState({
      });
      if (this.props.selectedDateHandler) {
        this.props.selectedDateHandler(date);
      }
    }
  
    formatWeekSelectLabel = () =&gt; {
      const { title } = this.props;
  
      if (this.props.date) {
        return moment(this.props.date).format('DD/MM/YYYY');
      }
      return `${title}`;
    }
  
    render() {
      return (
        &lt;MuiPickersUtilsProvider utils={MomentUtils}&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
            &lt;DatePicker
              readOnly
              labelFunc={this.formatWeekSelectLabel}
              onChange={this.handleDateChange}
              animateYearScrolling
              InputProps={{
                disableUnderline: true,
              }}
            /&gt;
          &lt;/MuiThemeProvider&gt;
        &lt;/MuiPickersUtilsProvider&gt;
      );
    }
  }
  
  export default DatePickComponent;
  </code></pre>
  
  <p>the expecteed results will be to the datepicker to show like its current size in the user laptop, but show much bigger in 4k screens</p>