Target specific CSS classes with Styled Components

user_2230302 0
Viewed 10817

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

styled-components reactjs
2 Answers

Searching for hours, I found that the best solution is to add a stylized parent component (it can be a div) overlying the component that needs a className and add the definition of the className directly into the stylized parent component.

VERY IMPORTANT:
A space is needed between the ampersand & and the class for this to take effect!

const StyledParent = styled.div`
   & .your-class-name {
     border-color: red;
   }
`;

<StyledParent>
   <Datepicker yourClassName="your-class-name" />
</StyledParent>
user_137082480
Related