Home page
Edit page

Styling

To style the component, use src/style.css as template and update it to fit the desired style. Then, just include it with your CSS files.

The CSS classes follow a BEM-like syntax. If you need to customize the CSS class names, use the classNames prop. Using this prop you can also import a CSS Module.

Importing the style template

You can also import and extend the CSS template in your Sass files, for example 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";

The stylesheet is also available from unpkg:

<link rel="stylesheet" href="https://unpkg.com/react-day-picker/lib/style.css">

Keep in mind the default style is not production-tested and may change between releases.

Modifiers

Modifiers added to react-day-picker via the modifiers prop becomes CSS modifiers for the DayPicker-day class. For example, if you use a isFirstDayOfMonth modifier, the CSS class for the matched day cells will be DayPicker-day--isFirstDayOfMonth.

Styling with CSS Modules

Once you have setup your build system to import CSS Modules, use the classNames prop to pass to the component the imported styles:

import React from 'react';
import DayPicker from 'react-day-picker';

import styles from '../styles/cssmodules.css';

export default function CSSModules() {
  return <DayPicker classNames={ styles } />
}