Question

我正在使用react-dates，并且我想使用主题更改SingleDatePicker的颜色。我已经阅读了文档（https://github.com/airbnb/react-dates#theming），但是我的实现无法正常工作。这是我的组件：

import React, { Component } from "react";
import ThemedStyleSheet from "react-with-styles/lib/ThemedStyleSheet";
import DefaultTheme from "react-dates/lib/theme/DefaultTheme";
import { SingleDatePicker } from "react-dates";
import "react-dates/initialize"; 
import "react-dates/lib/css/_datepicker.css";

ThemedStyleSheet.registerTheme({
  reactDates: {
    ...DefaultTheme.reactDates,
    color: {
      ...DefaultTheme.reactDates.color,
      highlighted: {
        backgroundColor: "#AE68FF",
        backgroundColor_active: "#DEC2FF",
        backgroundColor_hover: "#DEC2FF"
      }
    }
  }
});

class DatePicker extends Component {
  state = { focused: false };

  render() {
    const { date, onDateChange } = this.props;
    return (
      <SingleDatePicker
        date={date}
        onDateChange={onDateChange}
        focused={this.state.focused}
        onFocusChange={({ focused }) => this.setState({ focused })}
        id="date-picker"
        numberOfMonths={1}
        showDefaultInputIcon
        displayFormat="DD/MM/YYYY"
      />
    );
  }
}

export default DatePicker;

Answer 1

docs说：

请注意，如果您手动注册主题，则必须注册界面。一个人如果没有另一个人就无法工作。

在他们的示例中，他们注册了Aphrodite接口：

import aphroditeInterface from 'react-with-styles-interface-aphrodite';
...
ThemedStyleSheet.registerInterface(aphroditeInterface);

我看不到您已经在代码中注册了接口-也许这是问题所在。

主题反应日期不起作用

1 个答案: