如何调整material-ui/pickers中KeyboardDatePicker组件的标签字体大小？样式未生效

在项目中基于Material UI v4版本的@material-ui/pickers库使用KeyboardDatePicker组件，通过withStyles编写自定义样式想要增大组件的标签字体大小，但编写的自定义样式完全没有生效。

对应问题代码如下：

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);

• withStyles向组件注入的classes对象没有被正确传递到KeyboardDatePicker节点上，自定义的root类根本没有被挂载到DOM元素上
• 原生HTML标签选择器label的CSS优先级远低于MUI内部为InputLabel组件预设的类选择器样式，就算类挂载成功，自定义样式也会被MUI默认样式覆盖

方案1：正确传递类名 + 匹配内部组件类名覆盖样式 #

调整样式定义，直接匹配MUI内部标签组件的类名，同时把自定义的根类正确绑定到组件上：

1. 重写样式配置，替换原来的原生label选择器为MUI内部的标签类选择器：

   const styles = theme => ({
     root: {
       // 匹配MUI v4版本内部InputLabel的根类，通过父类选择器提升优先级
       '& .MuiInputLabel-root': {
         fontSize: '26px',
       },
       // 兼容低版本MUI对应的FormLabel类名
       '& .MuiFormLabel-root': {
         fontSize: '26px',
       }
     },
   });
   

2. 修改自定义日期选择器组件，把注入的classes传递给组件：

   export function CustomDatePicker(props) {
     const { classes, ...restProps } = props;
     return (
       <KeyboardDatePicker
         {...pickerProps}
         format='yyyy/MM/dd'
         mask='____/__/__'
         className={classes.root}
         {...restProps}
       />
     )
   }
   

方案2：通过组件暴露的props直接指定标签样式 #

KeyboardDatePicker原生支持通过InputLabelProps属性直接向内部的InputLabel组件传入自定义类，不需要依赖外层根节点选择器，样式生效更稳定：

1. 定义独立的标签样式类：

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

2. 在组件调用时把自定义类通过InputLabelProps传入：

   export function CustomDatePicker(props) {
     const { classes, ...restProps } = props;
     return (
       <KeyboardDatePicker
         {...pickerProps}
         format='yyyy/MM/dd'
         mask='____/__/__'
         InputLabelProps={{
           classes: { root: classes.customDateLabel }
         }}
         {...restProps}
       />
     )
   }
   

内容的提问来源于stack exchange，提问作者Shirisha