(v8) Themes and :hover styles with styled-components

[jodaka]

Hi there,

I've been using 8-th version of react-day-picker to build custom date input component (an input that parses user input, and a calendar button that summons popup with day-picker). Everything works smoothly except one thing: i can't seem to figure how to apply ":hover" styles.

I'm using styled-components.
At the moment I used defaults styles and injected them into DOM just like docs suggests. Then I create object with custom styles and pass it as 'styles' prop into DayPicker. It works for everything, except :hover styles, which I can't override.

In my case calendar keep using --rdp-accent-color and --rdp-background-color regardless of actual theme. Cause it has no clue what theme am I actually using. Is there any elegant ways of solving this issue?

[gpbl]

I'm using styled-components. At the moment I used defaults styles and injected them into DOM just like docs suggests.

🤔 I don't remember how styled-components works: is it correct to inject the style in the DOM when using it?

Anyway this is interesting... thanks for reporting. Probably we need to add a onMouseEnter, onMouseLeave to the button – which is also fine

In my case calendar keep using --rdp-accent-color and --rdp-background-color regardless of actual theme. Cause it has no clue what theme am I actually using. Is there any elegant ways of solving this issue?

I'd like first to reproduce this: any quick way to see this bug happening? Maybe by forking this code sandbox: https://codesandbox.io/s/react-day-picker-v8-eg8mw

[jodaka]

I'd like first to reproduce this: any quick way to see this bug happening? Maybe by forking this code sandbox: https://codesandbox.io/s/react-day-picker-v8-eg8mw

I'm not sure how to reproduce my issue quick enough, cause it envolves a bunch of other internal dependencies.
However I was able to solve my problem with a kind of hack.

We have a lib with a bunch of helper methods for themes. Among others it has a method that tells you whether light or dark theme is being used currently (we support only 2 themes).

  const darkStyles ={
    root: { backgroundColor: '#1e1e1e', color: getThemeColorWithOpacity('baseFontColor', 0.8, { theme }) }
  }

  const lightStyles = {
    root: { backgroundColor: '#fff', color: getThemeColorWithOpacity('baseFontColor', 0.8, { theme }) }
  }

  const cssVariables = `
    :root {
      --rdp-accent-color: ${isDark ? '#3897FE' : '#0070c9'};
      --rdp-background-color: ${isDark ? '#2b2b2b' : '#f2f2f2'};
    }`

  return (
    <>
      <style>
        {styles} 
        {cssVariables}
      </style>
   
      <DayPicker
        styles={isDark ? darkStyles : lightStyles}
      />
    </>
  ) 

where styles is a copy/paste of default react-day-picker css

I've stripped everything that isn't related to theming.

While current solution is far from being elegant, it works.

End result
https://user-images.githubusercontent.com/83644/111109149-39a45d00-856b-11eb-858a-9a3b732eea03.mp4

[gpbl]

It think you are mixing css classes and inline style and this is making difficult to understand where is the problem.

The better option you have is to switch all to styled-component. Search the styled-components docs what is the best practice for importing a standard css file (from an external library).

<style>
  {styles} 
  {cssVariables}
</style>

Remove this above and do not import anywhere the original .css file. You want to use only the DayPicker styles prop. For doing this, create a JS object containing the styles from the DayPicker's CSS and pass it to the styles prop. (I'm sure styled component should provide an easy solution for that, otherwise, we could try to add this object to the package).

Remove the use of CSS variables in that object and alter it according to your tools. Also, styled-component should help you with the :hover styles.

Moving this to the Github Discussion page, please keep the discussion going as we do want to easily support styled components.

[jodaka]

@gpbl — I'm impressed by your productivity. I've fixed -beta19 version in my package.json and day or two later discovered that there's already -beta24 and few previous beta version were skipped in changelog (i was curios so checked commit log and them there).

Anyways.
I tried to pass css to <DayPicker> via classNames prop, but it didn't worked (I mean daypicker was rendered without styles at all). In the documentation 'CSS Modules' section has code, but no live example, so I couldn't dig deeper and understand what I was missing.

Got email about another person commenting on the issue, but link lead me here, where I can't emailed message 🙈

[lmaze]

@jodaka Sorry I think it was me 😅 I had commented yesterday in this discussion but I finally preferred to make a new idea in the discussions of the project to centralize the request and to make it clearer: #1189

For your problem, I have so far used a wrapper component with styled-components. This is probably the easiest solution. Today I don't think it's possible to directly style the DayPicker component without a wrapper if DayPicker component does not support the className property.

For example you can do:

const DayPickerWrapper = styled.div`
  .rdp {
    --rdp-cell-size: 50px;
    --rdp-accent-color: ${({theme}) => theme.colors.MAIN_THEME_COLOR};
    --rdp-background-color: '#2b2b2b';
    display: block;
  }

  .rdp-months {
    flex-direction: column;
    align-items: center;
  }
`;

And in your React component:

<DayPickerWrapper>
          <DayPicker/>
<DayPickerWrapper>

And I think you can always force styles with the !important statement (eg if you have problems styling the: hover).

Hope you find this useful 😉

[gpbl]

@jodaka There was indeed a bug that was not passing down the className to the container component. I fixed this in beta-25 but I haven't tested it with styled-components.

It should be possible to setup a CodeSandbox with styled-component, that would help my development. I will give a try when I have some time left :)

[gpbl]

PS. using "react-day-picker": "next" in `package.json should help to keep updated to the latest beta.