Confusing styling with Typescript

[ppozniak]

Hello.

In my opinion styling the library in v7 can be a bit confusing, especially when you have TS yelling at you.

From my understanding if you use CSS modules the best way to style this library:

1. @import "~react-day-picker/lib/style"; in your SCSS module file
2. import your styles (which are style modules)
3. Pass it into classNames prop.

But now if you have generic typings for your SCSS like [className: string]: string } TS will obviously yell at you.

The way I used to and I think is the most common would be to

1. Import CSS file for the project
2. Do some overrides like that

import styles from './date-input.scss' // This is css module
// ...
classNames={{
  container: style.my-custom-name
}}

But in this case it won't be happy, because all fields of the ClassNames type are required.

Wonder what would be the best solution for that issue and what is the preferred way to go with the styling of this library.

[ppozniak]

Sorry. Honestly didn't know Discussion tab exists 🤣

I've went away from this issue just overriding the global class names like
:global(.DayPicker)

However one thing that I had on mind was to making all the keys in classNames prop optional? I think current implementation assumes that you will always use classNames to provide CSS module from the library, not your own custom styles.

There are a lot of ways to style this library which is good so just wanted to have an open minded conversation.

[gpbl]

yes sorry for moving this here :) Yeah the classNames support is wonky in v7 - will be fixed in v8.