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}
    />