---
id: styling
title: Styling
---

> Style React DayPicker via CSS, inline styles, or by using CSS modules or any JS-in-CSS solution.

DayPicker is bundled with a [small CSS
file](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/style.css): use it as template for your own CSS style. If your build tools allow to import CSS files, you can also import directly in your script:

```js
import "react-day-picker/dist/style.css";
import { DayPicker } from 'react-day-picker';
```

You can style DayPicker:

- changing the CSS for each element.
- using custom class names (e.g. for [CSS Modules](https://github.com/css-modules/css-modules))
- setting the inline style for each HTML element

## Overriding the default CSS

To each HTML element created by DayPicker are assigned `.rdp-*` CSS class names,
as listed in the [table below](#html-elements).

Use them in the application’s CSS file, for example

```css
/* container */
.rdp {
  background: salmon:
}
/* head element */
.rdp-head {
  font-weight: bold;
  color: blue;
}
/* etc. */
```

## Using Inline Styles

Use the [styles](./api/daypicker#styles) prop to change the inline style of
each element (object keys are listed in the [table below](#html-elements)).

```jsx preview
function App() {
  return (
    <DayPicker
      styles={{
        caption: { color: "salmon " },
        head: { color: "violet" }
      }}
    />
  );
}
```


## Using Custom Class Names

Replacing the default class names is useful with [CSS
Modules](https://github.com/css-modules/css-modules) or other JS-in-CSS bundlers. To
use custom class names, pass them the [classNames prop](./props.mdx#classnames):

```jsx preview
function App() {
  const css = `
    .salmon-head {
      color: salmon;
    }
    .purple-caption {
      font-weight: bold;
      color: purple;
      padding: 3px 0 6px 0;
    }
  `;
  return (
    <>
      <style>{css}</style>
      <DayPicker
        classNames={{
          head: 'salmon-head',
          caption: 'purple-caption'
        }}
      />
    </>
  );
}
```

## HTML Elements

The table lists all the HTML elements in use by DayPicker. Use the element’s
name in combination with `styles` or `classNames` props.

:::caution
The table is not updated as it should be created by typedocs instead.
:::

| Element name       | Default CSS Class      | Element description                          |
| ------------------ | ---------------------- | -------------------------------------------- |
| **container**      | `.rdp`                 | The container element                        |
| **caption**        | `.rdp-caption`         | The caption element                          |
| **day**            | `.rdp-day`             | The day element (a button when interactive)  |
| **selected**       | `.rdp-day_selected`    | The day element when selected                |
| **disabled**       | `.rdp-day_disabled`    | The day element when disabled                |
| **today**          | `.rdp-day_today`       | The day element that is today                |
| **outside**        | `.rdp-day_outside`     | The day element falling outside the month    |
| **dayWrapper**     | `.rdp-day_wrapper`     | A wrapper of the day text element            |
| **month**          | `.rdp-month`           | Wrapper element of the month table           |
| **monthTable**     | `.rdp-month_table`     | The month’s table                            |
| **monthTbody**     | `.rdp-month_tbody`     | The `tbody` of the month’s table             |
| **months**         | `.rdp-months`          | The container of the months                  |
| **head**           | `.rdp-head`            | The head element                             |
| **headRow**        | `.rdp-head_row`        | The head row element                         |
| **headWeekNumber** | `.rdp-head_weeknumber` | The head cell element for the week numbers   |
| **headWeekName**   | `.rdp-head_weekname`   | The head cell element for the weekday names  |
| **nav**            | `.rdp-nav`             | The navigation container element             |
| **navPrev**        | `.rdp-nav_prev`        | The button to navigate to the previous month |
| **navNext**        | `.rdp-nav_next`        | The button to navigate to the next button    |
| **week**           | `.rdp-week`            | The week row                                 |
| **weekWeeknumber** | `.rdp-week_weeknumber` | The week’s number cell                       |
| **weekDay**        | `.rdp-week_day`        | The week’s day cell                          |
| **weekNumber**     | `.rdp-weeknumber`      | The week’s number                            |
