Question

当我将主题从默认（白色）切换为黑色时，我必须将我的react-datepicker中的popper（压延机）的背景颜色更改为带有白色字体颜色的黑色。

我尝试使用popperClassName，但是无法传递字体颜色和背景颜色，尽管我的占位符已接受给定的值并在切换主题时更改了背景。我只需要实现样式内联（js / jsx中的JSS-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文件并将其导入。它应该工作。您可以在react-datepicker.css文件夹的dist中找到更多样式。

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

1 个答案: