React结合moment使用react-day-picker如何设置placeholder居中

DayPickerInput 组件内部最终渲染的是原生 <input> 元素，placeholder 是 input 自带的伪元素，文本对齐规则完全跟随所属 input 的设置，没有独立的对齐逻辑。只要让内部 input 的文本对齐为居中，placeholder 就会自动呈现居中效果，具体可根据项目场景选择以下两种实现方式：

单组件单独设置（推荐，样式隔离） #

用 DayPickerInput 提供的 inputProps 透传参数，把居中样式直接传给内部的输入框，修改现有组件代码即可：

<div>
  帐单开始日期:
  <DayPickerInput 
    placeholder="test"
    onDayChange={startDate => this.handleStartDate(startDate)} 
    inputProps={{
      style: { textAlign: 'center' }
    }}
  />
</div>

这种写法的样式只作用于当前这个日期输入框，不会影响项目里其他输入组件的默认样式，是隔离性最好的实现方案。

全局统一设置（适合全项目规范统一） #

如果项目内所有日期输入框都需要统一应用居中对齐，可以在全局样式文件中，针对组件自带的固定类名设置规则：

.DayPickerInput input {
  text-align: center;
}

避坑提醒 #

不需要单独给 ::placeholder 伪元素重复设置 text-align 属性：该伪元素会默认继承所属 input 的文本对齐规则，只要 input 本身的对齐设置正确，placeholder 会自动跟随对齐，单独给伪元素加对齐属于冗余代码。

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