React-day-picker: Styled Components does not work with DayPickerInput

[jgatjens]

https://codesandbox.io/s/r4x57p6x2o

[trietlam]

I can do it with a wrapper, not sure if it's proper way.
https://codesandbox.io/s/7zoy5293v0

[jgatjens]

I did pretty much the same way but with scss. how I did not think this way.
👍

[kirillku]

To avoid having wrapper, you can pass the right className to classNames prop of DayPickerInput. Check styling-normal-react-components section in styled-components docs.

Updated codesandbox: https://codesandbox.io/s/p3427n1m8j

[matiasmenker]

Update fork because the wrapper does not work with refs, so i add forwardRef:

https://codesandbox.io/s/9lkmj6mlvp?fontsize=14

[brunodasilvalenga]

Hey, you can create a wrapper and replace the existing css, like this:

const WrapperStyled = styled.div`
  &&& {
    .DayPicker,
    .DayPicker-wrapper {
      :focus {
        outline: none;
      }
    }

    .DayPicker-Weekday {
      color: #6adc91;
      font-size: 18px;
      font-family: 'Montserrat-SemiBold';
    }
}
`

const Calendar = () => { return ( <WrapperStyled> <DayPicker {...props} numberOfMonths={2} selectedDays={selectedDays} navbarElement={<Navbar />} captionElement={<Caption />} onDayClick={handleDayClick} /> </WrapperStyled> ) }