reactjs - 使用样式化组件定位特定的 CSS 类

Question

我将如何react-datepicker使用 styled-components 设置样式？datepicker 库看起来像是使用某种类型的 BEM 样式（下面的屏幕截图），我通常只使用它们提供的类名并使用 Sass 设置样式。但是，我将如何使用样式化组件来定位这些类名？这甚至可能吗？

Answer 1

由于styled-components它只是 CSS™，因此您可以像使用任何其他样式表一样使用react-datepicker提供的类名。

唯一的区别是您必须将日期选择器包装在一个包装器样式的组件中，该组件应用所有这些类：

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

<Wrapper>
  <Datepicker />
</Wrapper>

&编辑：根据另一个答案，在和 period之间需要有一个空格.。

Answer 2

找了几个小时，我发现最好的解决方案是在需要className的组件上添加一个风格化的父组件（可以是一个div），并将className的定义直接添加到风格化的父组件中。

非常重要：
在＆符号和类之间需要一个空格&才能生效！

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

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