3

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

4

1 回答 1

5

我需要同样的东西，这就是我解决它的方法 - 使用 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文件夹中找到更多样式。

于 2019-10-17T12:28:30.223 回答