React DayPicker 样式占位符

Question

我正在使用 react-day-picker 字段 (https://react-day-picker.js.org/)。我想定制它。我已经去了 react-day-picker/lib/style.css 并使用了颜色、字体大小等。但问题是，我无法更改占位符样式本身！我已经尝试了一切，基本上我想做的是显示 "Hello" 并制作 红色背景 而不是 YYYY-MD 和白色背景。请帮忙。这就是我现在所拥有的： https://ibb.co/nGgCwJ

我的 .js 代码：

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

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}
        />
      </div>
    );
  }
}

export default DateP;

Answer 1

此外，如果您想更改占位符文本的颜色（初始日期），请使用：

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

来源：https://www.w3schools.com/howto/howto_css_placeholder.asp

Answer 2

这是我为你准备的。 刚刚打开网站去元素并编辑这些。

因此，如果您想实现这一点，只需创建一个 css 文件并将其导入您的 CSS 文件即可。