MaterialUI的KeyboardDatePicker上下箭头可见、图标丢失问题求助

异常1：输入框出现无法隐藏的上下箭头 #

该箭头属于浏览器针对日期/数值类输入框的默认控件，可通过以下两种方案移除：

• 方案1：全局添加CSS样式，覆盖默认浏览器表现

/* 适配Chrome、Safari、Edge内核 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 适配Firefox内核 */
input[type=number] {
  -moz-appearance: textfield;
}
/* 隐藏浏览器原生日期选择控件 */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

• 方案2：给组件添加局部样式配置，仅作用于当前日期选择器

<KeyboardDatePicker 
  style={{marginTop:"10px"}}
  clearable
  label="Date of birth"
  value={dateOfBirth}
  onChange={(date) => handleDateChange(date, setDateOfBirth, "birth")}
  minDate={new Date(1900, 0 ,1)}
  format="dd/MM/yyyy"
  InputProps={{
    inputProps: {
      style: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
          WebkitAppearance: "none",
          margin: 0
        },
        "&[type=number]": {
          MozAppearance: "textfield"
        }
      }
    }
  }}
/>

异常2：日期选择器图标过淡几乎不可见 #

该问题多由样式覆盖或依赖版本异常导致，可按顺序排查修复：

1. 强制指定图标样式，避免全局样式覆盖
   先确认已正确引入官方图标库，再通过组件Props明确传入图标和样式配置：

import DateRangeIcon from '@material-ui/icons/DateRange';

<KeyboardDatePicker 
  style={{marginTop:"10px"}}
  clearable
  label="Date of birth"
  value={dateOfBirth}
  onChange={(date) => handleDateChange(date, setDateOfBirth, "birth")}
  minDate={new Date(1900, 0 ,1)}
  format="dd/MM/yyyy"
  // 自定义传入明确图标，强制设置不透明度和颜色
  keyboardIcon={<DateRangeIcon style={{ opacity: 1, color: 'rgba(0, 0, 0, 0.54)' }} />}
  // 确保图标容器样式正常
  InputAdornmentProps={{
    style: {
      opacity: 1
    }
  }}
  // 保留上方隐藏箭头的InputProps配置
  InputProps={{
    inputProps: {
      style: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
          WebkitAppearance: "none",
          margin: 0
        },
        "&[type=number]": {
          MozAppearance: "textfield"
        }
      }
    }
  }}
/>

2. 检查依赖版本兼容性
   如果近期有自动更新依赖的情况，回退到功能正常时的版本即可。如果使用的是MaterialUI v4版本，需确保@material-ui/pickers、@material-ui/core、@material-ui/icons三个依赖的版本匹配，没有跨版本混用。
3. 检查全局主题配置
   排查全局MaterialUI主题配置中，是否意外修改了MuiSvgIcon或MuiIconButton的默认透明度、颜色属性，如有改回默认值即可。

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