Theming react-dates not working

Question

I am using react-dates and I want to change the colours of the SingleDatePicker using the theming. I have read the docs (https://github.com/airbnb/react-dates#theming) but my implementation is not working. Here is my component:

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;

score 2 · Answer 1 · answered Jul 13 '18 at 09:59

The docs say:

Note that you must register an interface if you manually register a theme. One will not work without the other.

In their example they register the Aphrodite interface:

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

I can't see that you've registered an interface in your code - maybe this is the problem.

Theming react-dates not working

1 Answers1