如何使用媒体查询为4k分辨率屏幕设置物料ui日期选择器大小

时间:2019-06-11 14:27:29

标签: css reactjs material-ui

我正在用React for 4k目标设备编写一个应用程序。唯一的问题是Material UI日期选择器-在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屏幕上显示更大的显示

0 个答案:

没有答案