时间戳

首页 > 解决方案 > [KeyboardDatePicker]：如何在材料 UI/pickers 中增加 KeyboardDatePicker 的字体大小反应

material-ui - [KeyboardDatePicker]：如何在材料 UI/pickers 中增加 KeyboardDatePicker 的字体大小反应

问题描述

我正在尝试使用以下代码增加 KeyboardDatePicker 组件中标签的字体大小，但它对我不起作用。任何解决方案将不胜感激。 在此处输入图像描述

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

解决方案

根据API 文档，道具将被传递给 material-ui TextField 组件。TextField因此，您需要根据以下组件修改 fontSize ：

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

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

然后将其分配给KeyboardDatePicker组件：

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

        />

沙盒

推荐阅读