[KeyboardDatePicker]：如何在反应中增加 Material-ui/pickers 中 KeyboardDatePicker 的字体大小答案

【问题标题】：[KeyboardDatePicker]: How to increase font size of KeyboardDatePicker in material-ui/pickers in react[KeyboardDatePicker]：如何在反应中增加 Material-ui/pickers 中 KeyboardDatePicker 的字体大小
【发布时间】：2023-03-06 22:19:01
【问题描述】：

我正在尝试使用以下代码增加 KeyboardDatePicker 组件中标签的字体大小，但它对我不起作用。任何解决方案将不胜感激。 enter image description here

import React, { memo } from 'react';
import { compose } from 'redux';
import { withStyles } from '@material-ui/core/styles';

import { DatePicker, KeyboardDatePicker } from '@material-ui/pickers';


const styles = theme => ({
  root: {
    '& label': {
      fontSize: '26px',
    },
  },
});

export function CustomDatePicker(props) {
    return (
        <KeyboardDatePicker
          {...pickerProps}
          format='yyyy/MM/dd'
          mask='____/__/__'
          {...props}
        />
    )
}

export default compose(
    memo,
    withStyles(styles),
  )(CustomDatePicker);

【问题讨论】：

标签： material-ui

【解决方案1】：

根据API doc，props 将被传递给 material-ui TextField 组件。所以，你需要根据TextField组件修改fontSize如下：

首先创建一个新的样式对象，包含您喜欢的字体大小：

 customTextField: {
    "& input::placeholder": {
      fontSize: "20px"
    }
  }

然后将其分配给KeyboardDatePicker组件：

 <KeyboardDatePicker
          {...pickerProps}
          format='yyyy/MM/dd'
          mask='____/__/__'
          {...props}
          classes={{ root: classes.customTextField }}

        />

sandbox

【讨论】：