Как установить размер средства выбора даты для материала с помощью медиазапроса для экрана с разрешением 4k - PullRequest
0 голосов
/ 11 июня 2019

Я пишу приложение в React для целевого устройства 4k.Единственная проблема связана со средством выбора даты в пользовательском интерфейсе, которое кажется крошечным на экранах 4k.Как мне установить его размер с помощью медиа-запросов?

Не удалось найти какой-либо материал по теме.Я пытался что-то (что прокомментировано в коде, который я прикрепил в этом вопросе.

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}`,
        '&:hover': {
          backgroundColor: `${greenAccept}`,
        },
      },
      current: {
        color: `${greenAccept}`,
      },
    },
    MuiPickersModal: {
      dialogAction: {
        color: `${greenAccept}`,
      },
    },
  },
});


class DatePickComponent extends React.Component {
  handleDateChange = (date) => {
    this.setState({
    });
    if (this.props.selectedDateHandler) {
      this.props.selectedDateHandler(date);
    }
  }

  formatWeekSelectLabel = () => {
    const { title } = this.props;

    if (this.props.date) {
      return moment(this.props.date).format('DD/MM/YYYY');
    }
    return `${title}`;
  }

  render() {
    return (
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <MuiThemeProvider theme={theme}>
          <DatePicker
            readOnly
            labelFunc={this.formatWeekSelectLabel}
            onChange={this.handleDateChange}
            animateYearScrolling
            InputProps={{
              disableUnderline: true,
            }}
          />
        </MuiThemeProvider>
      </MuiPickersUtilsProvider>
    );
  }
}

export default DatePickComponent;

ожидаемые результаты будут для указателя даты, чтобы показать, как его текущий размер в ноутбуке пользователя, но показать гораздо больше в 4kэкраны

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...