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文件。