Styling

You must style the component with your own CSS: start with src/style.css as template, copy it in a new CSS file and hack it to fit the desired style.

The CSS classes follow a BEM-like syntax.

Modifiers

Modifiers added to the day picker through the modifiers prop becomes CSS modifiers for the DayPicker-day class. For example, if you use a isFirstDayOfMonth modifier, the CSS class to style the corrispondent day cells is DayPicker-day--isFirstDayOfMonth.


Importing the style template

Only for testing or demo purposes, you can use the CSS template in your Sass files, for example importing it from node_modules:

@import "../node_modules/react-day-picker/lib/style"

or in your JS files (e.g. when using webpack-css-loader):

import "react-day-picker/lib/style.css"

Keep in mind the default style may change between releases!