Javascript 反应日期选择器样式占位符

我与react day picker field（）合作。我想定制它。我已经去了react day picker/lib/style.css，玩了颜色、字体大小等。但问题是，我不能改变占位符样式本身！我已经尝试了所有的方法，基本上我想做的是显示“Hello”并制作红色背景，而不是YYYY-M-D和白色背景。请帮忙。这就是我现在拥有的：

我的.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;

import React，{Component}来自'React'；
从“react day PickerInput/DayPickerInput”导入DayPickerInput；
导入'react day picker/lib/style.css'；
类DateP扩展组件{
建造师（道具）{
超级（道具）；
this.handleDayChange=this.handleDayChange.bind（this）；
此.state={
selectedDay:未定义
};
}
handleDayChange（天）{
this.setState（{selectedDay:day}）；
}
render（）{
const{selectedDay}=this.state；
返回(
{selectedDay&&Day:{selectedDay.toLocaleDateString（）}
{！selectedDay&&Date选择器}
);
}
}
导出默认日期；

这是我给你的东西。 刚刚打开网站去元素和编辑这些

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

---

此外，如果要更改占位符文本的颜色（初始日期），请使用以下选项：

::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;
}

---

来源：

？您是否尝试在React中使用

输入[占位符]

@HarishSoni，但它不起作用…您可以使用CSS。如果需要进一步帮助，请告诉我。我无法打开图像。你能把它们上传到ibb.co吗？当然可以。这些是链接没问题，伙计。这很有帮助。非常感谢。