在 react-datepicker 中更改日历的背景颜色答案

【问题标题】：Change the background color of calender in react-datepicker在 react-datepicker 中更改日历的背景颜色
【发布时间】：2019-09-27 13:10:39
【问题描述】：

当我将主题从默认（白色）切换为黑色时，我必须将我的 react-datepicker 中的 popper（即日历）的背景颜色更改为黑色和白色字体颜色。

我尝试使用 popperClassName，但无法传递字体颜色和背景颜色，尽管我的占位符已接受给定值并在切换主题时更改了其背景。我必须实现内联样式（JSS - js/jsx 中的 css）方式！虽然我在外部尝试过占位符的样式。

 <DatePicker
                    selected={startDate}
                    dateFormat={DATE_FORMAT}
                    showMonthDropdown
                    showYearDropdown
                    isClearable
                    todayButton="Today"
                    popperClassName={{ color: fontColor, background }}
                    placeholderText="Click to select date"
                    className={background === '#303030' ? 'placeholderTable' : ''}
                    onChange={(date) => {
                  date = moment(date).format(DATE_FORMAT)
                  if (date === 'Invalid date') {
                    // this means that the user deleted the date
                    // this.setState({ start_date: undefined })
                    this.handleChange({ start_date: undefined, temp_end_date: undefined })
                  } else {
                    // this.setState({ start_date: date })
                    this.handleChange({
                      start_date: date,
                      temp_end_date: moment(date, DATE_FORMAT).add(1, 'year').format(DATE_FORMAT)
                    })
                  }
                }}
                  />

我希望通过 popperClassName 或任何其他方式来修改 popper 的样式。

【问题讨论】：

屏幕截图 2019-05-09 下午 12.21.47。日历不会改变其背景颜色。
屏幕截图 2019-05-09 下午 12.28.04。主题切换时占位符背景颜色发生变化
还查找了此链接reactdatepicker.com/#example-17。但它无法到达任何地方。

标签： material-ui react-datepicker

【解决方案1】：

我需要同样的东西，这就是我解决它的方法 - 使用 css：

.react-datepicker__header {
  text-align: center;
  background-color: #3e82cf;
  border-bottom: 0px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 8px;
  position: relative;

}

.react-datepicker__today-button {
  background: #3e82cf;
  border-top: 0px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

对于您可以使用的日历区域：

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #a66;
  color: #000;
  border: 0px;
  border-radius: 0;
  display: inline-block;
  position: relative;
}

只需创建 CSS 文件并导入即可。它应该工作。您可以在dist 文件夹中的react-datepicker.css 中找到更多样式。

【讨论】：