Search code examples
reactjsstyled-components

Target specific CSS classes with Styled Components

How would I go about styling something like the react-datepicker with styled-components? The datepicker library looks like it uses some type of BEM style (screenshot below) which I would normally just use their provided class names and style those using Sass. But, how would I target those class names with styled-components? Is that even possible?

enter image description here

Solution

  • Since styled-components is just CSS™ you'd do it like with any other style sheet, by using the class names react-datepicker provided.

    The only difference is that you'll have to wrap the datepicker in one wrapper styled component which applies all of these classes:

    const Wrapper = styled.div`
  &.react-datepicker {
    color: blue;
  }
`

<Wrapper>
  <Datepicker />
</Wrapper>