我正在用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屏幕上显示更大的显示