1

我正在使用 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;
4

1 回答 1

2

文档说:

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

在他们的示例中,他们注册了 Aphrodite 接口:

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

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

于 2018-07-13T09:59:21.083 回答