React项目中如何基于条件为react-date-picker正确应用样式？

在React项目中，我通过JSON数据映射渲染了若干日期字段并展示在网格中，使用react-date-picker包实现日期选择功能。我希望给特定日期（比如06/20/2020）的字段添加背景色，但当前写的样式会应用到所有日期字段。

相关代码如下：

DynamicTable.js（组件文件） #

<DatePicker...
className={moment(this.props.rows[row.id].pickdate).format("MM/DD/YYYY") =="06/20/2020" ? 
"react-date-picker__inputGroup" : ""}
...

style.css（样式文件） #

.react-date-picker__inputGroup {
  background-color: lightgray;
}

我尝试给日期等于06/20/2020的字段添加react-date-picker__inputGroup类来设置背景色，但这个样式会作用于所有日期字段，请问怎么正确实现条件样式？

问题根源是react-date-picker__inputGroup是react-date-picker组件内部默认给输入框添加的类名——不管你有没有手动指定，所有日期选择器的输入框都会自带这个类，所以你的样式会命中全部组件。

正确的做法是自定义专属类名，不要复用组件默认类：

方案一：给组件容器加自定义类，嵌套样式命中输入框 #

修改组件代码：

<DatePicker
  className={moment(this.props.rows[row.id].pickdate).format("MM/DD/YYYY") === "06/20/2020" 
    ? "highlighted-date-picker" 
    : ""}
  // 保留其他原有属性
/>

修改CSS样式：

.highlighted-date-picker .react-date-picker__inputGroup {
  background-color: lightgray;
}

方案二：直接给输入框加自定义类 #

利用react-date-picker的inputProps属性，给内部输入框传递类名：

<DatePicker
  inputProps={{
    className: moment(this.props.rows[row.id].pickdate).format("MM/DD/YYYY") === "06/20/2020" 
      ? "highlighted-date-input" 
      : ""
  }}
  // 保留其他原有属性
/>

对应的CSS：

.highlighted-date-input {
  background-color: lightgray;
}

优化建议：更可靠的日期判断 #

尽量避免用字符串格式化后对比日期，用moment的isSame方法更准确，比如：

moment(this.props.rows[row.id].pickdate).isSame("2020-06-20", "day")

这样能避免因日期格式差异导致的判断错误。

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