material-ui - 在 react-datepicker 中更改日历的背景颜色

Question

当我将主题从默认(白色)切换为黑色时，我必须将我的 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 的样式。

Answer 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 中找到更多样式。