React中如何为DateTimePicker的input标签直接添加指定类？

要给DateTimePicker内部的<input>元素添加MuiInputBase-input类，你可以利用组件的inputProps属性直接传递类名——@material-ui/pickers的DateTimePicker基于TextField构建，会将inputProps透传给底层的输入元素。

代码修改示例 #

import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

render() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DateTimePicker
        value={this.state.selectedDateTime}
        onChange={this.OnChangeHandler}
        className="mh-Dateinput"
        // 通过inputProps给底层input元素添加目标类
        inputProps={{ className: 'MuiInputBase-input' }}
      />
    </MuiPickersUtilsProvider>
  )
}

注意事项 #

如果需要保留输入元素原有的类名、避免覆盖，你可以通过模板字符串追加类名：

inputProps={{ className: `${yourExistingClass} MuiInputBase-input` }}

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