Material Ui datepicker - 在文本字段中设置日历图标的样式

Question

我正在尝试在 React 的 Material UI 的键盘日期选择器文本字段中设置日历图标的样式（特别是增加图标的字体大小）。

<KeyboardDatePicker
  keyboard={!this.props.isDisabled}
  keyboardIconProps={{ fontSize: "35px" }}
  clearable
  disabled={this.props.isDisabled}
  error={this.state.isError}
  helperText={this.state.errorMsg}
  pickerRef={node => (this.picker = node)}
  InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
  onError={console.log}
  value={this.props.storeValue}
  onChange={this.onChangeCallback}
  format={this.props.displayFormat}
  onBlur={this.onBlurCallback}
  disableOpenOnEnter
  InputLabelProps={this.inputLabelProps}
  disableFuture={this.props.disableFuture}
  disablePast={this.props.disablePast}
/>

我尝试设置 KeyboardButtonProps 但它似乎没有设置图标的样式。我在网上搜索并没有解决我的问题。任何帮助将非常感激。干杯！

Answer 1

假设您使用来自@material-ui/pickers 的KeyBoardDatePicker

您可以通过 keyboardIcon 属性更改图标，该属性需要一个 ReactNode 作为子节点。

基本上只需将以下prop 添加到您的组件中

keyboardIcon={<SomeReactElement/>}

Here你有一个工作沙箱