如何自定义react-day-picker的占位符文本与样式？

嘿，我来帮你搞定这个react-day-picker的自定义需求！你之前修改全局style.css没搞定占位符和背景，其实不用动源码，用组件自带的属性和简单的样式覆盖就能轻松实现。

1. 修改占位符文本 #

DayPickerInput组件本身提供了placeholder属性，直接设置就能替换默认的"YYYY-M-D"，完全不用去修改CSS文件或者组件源码。

2. 修改输入框背景颜色 #

有两种简单易维护的方式实现：

• 方式一：通过inputProps传递内联样式：组件允许通过inputProps给内部的<input>元素传递属性，包括行内样式，适合快速修改单个组件的样式。
• 方式二：自定义className+CSS覆盖：给组件添加自定义类名，然后写CSS规则覆盖输入框样式，这种方式更适合需要在多个组件复用的样式场景。

修改后的完整代码 #

下面是整合了两种修改的代码示例（这里优先展示内联样式的方式，你可以根据需求换成className方式）：

import React, { Component } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

// 如果选择className方式，可添加以下CSS（建议放在单独的样式文件中）
/*
.custom-date-input input {
  background-color: red;
}
*/

class DateP extends Component {
  constructor(props) {
    super(props);
    this.handleDayChange = this.handleDayChange.bind(this);
    this.state = { selectedDay: undefined };
  }

  handleDayChange(day) {
    this.setState({ selectedDay: day });
  }

  render() {
    const { selectedDay } = this.state;
    return (
      <div>
        {selectedDay && <h3>Day: {selectedDay.toLocaleDateString()}</h3>}
        {!selectedDay && <h3>Date Picker</h3>}
        <DayPickerInput
          onDayChange={this.handleDayChange}
          placeholder="Hello" // 替换默认占位符文本
          inputProps={{ 
            style: { backgroundColor: 'red' } // 设置输入框背景为红色
            // 如果用className方式，替换为 className: "custom-date-input"
          }}
        />
      </div>
    );
  }
}

export default DateP;

为什么之前修改style.css没生效？ #

你之前改全局style.css可能是因为没有选中到正确的输入框元素——DayPickerInput渲染的输入框是嵌套在组件内部的，直接修改全局样式可能存在选择器优先级不足，或者选择器指向错误的问题。用上面的两种方式更直接，也不会影响其他组件的样式。

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