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 import a CSS Module.

Importing the style template

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">

Styling 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 firstOfMonth modifier, the CSS class for the matched day cells will be DayPicker-day--firstOfMonth.

Inline styles with modifiers

Using the modifiersStyles prop, you can inline-style the cells for the specified modifiers:

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default function StylingInline() {
  const modifiers = {
    thursdays: { daysOfWeek: [4] },
    birthday: new Date(2018, 9, 30),
  };
  const modifiersStyles = {
    birthday: {
      color: 'white',
      backgroundColor: '#ffc107',
    },
    thursdays: {
      color: '#ffc107',
      backgroundColor: '#fffdee',
    },
  };
  return (
    <DayPicker
      month={new Date(2018, 9)}
      modifiers={modifiers}
      modifiersStyles={modifiersStyles}
    />
  );
}

Styling with CSS Modules

Once you have setup your build system to import CSS Modules, use the classNames prop to use 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 } />
}

Styling modifiers with CSS Modules

Since you can’t use the default’s BEM-like modifiers CSS classes, you need to specify modifiers using the class names from the imported module:

import React from 'react';
import DayPicker from 'react-day-picker';
import styles from '../styles/cssmodules.css';

export default function CSSModules() {
  return (
    <DayPicker 
      classNames={ styles } 
      modifiers={{
        [styles.birthday]: new Date(2018, 8, 19)
      }}
    />
  );
}