Skip to main content

Styling DayPicker

Style via CSS#

DayPicker includes a CSS file to import, or to copy as template.

import 'react-day-picker/style.css';

The CSS uses few variables to quickly override the colors and the cell size:

:root {
--rdp-cell-size: 40px;
--rdp-accent-color: #0000ff;
--rdp-background-color: #e7edff;
/* Switch to dark colors for dark themes */
--rdp-accent-color-dark: #3003e1;
--rdp-background-color-dark: #180270;
/* Outline border for focused elements */
--rdp-outline: 2px solid var(--rdp-accent-color);
}

Inline styles#

To change the appearance of any DayPicker element via inline-styles use the styles prop.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return (
<DayPicker
styles={{
caption_label: { color: 'red' }
}}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)

Custom CSS classes#

To use custom classes, use classNames.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const style = `
.caption_aqua {
color: aquamarine;
font-weight: bold;
font-size: 140%;
}
`;
return (
<>
<style>{style}</style>
<DayPicker
classNames={{
caption_label: 'caption_aqua'
}}
/>
</>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)

CSS Modules#

Replacing the default class names is useful with CSS Modules.

  1. Create a CSS module using the class names listed in StyledElements. Or use this CSS file, remove the rdp- prefix from the selectors.
/* my-css.module.css */
.root {
/* ... */
}
.caption_label {
/* ... */
}
.day_today {
/* ... */
}
/* etc.. */
  1. Pass the imported CSS module to the classNames prop
import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import * as classNames from './my-css.module.css';
export default function App() {
return (
<>
<style>{style}</style>
<DayPicker classNames={classNames} />
</>
);
}