Search code examples
react-day-picker

Add a class to react-day-picker?

How can I add a class to react-day-picker's today button?

It seems to be possible from the documentation: http://react-day-picker.js.org/api/DayPicker#classNames

const dayPickerClassNames = { todayButton: 'newClass' };

<DayPicker
  classNames={dayPickerClassNames}
/>

However Im getting an error:

Warning: Failed prop type: The prop `classNames.day` is marked as required in `DayPicker`, but its value is `undefined`.
Solution

  • According to the API, it expects the following keys (ie, it needs the container, wrapper, .. months.. month.. day.. etc. keys), but you are only providing the todayButton key/value, apparently you need to provide each key/value pair.

    You should be able to import the default classNames object, and then just update the todayButton value like so:

    import classNames from '../classNames' // this path is probably not correct

const dayPickerClassNames = { ...classNames, todayButton: 'newClass' };

<DayPicker
  classNames={dayPickerClassNames}
/>