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

Question

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

Answer 1

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

唯一的区别是你必须将datepicker包装在一个包装样式的组件中，该组件应用所有这些类：

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

<Wrapper>
  <Datepicker />
</Wrapper>

Answer 2

经过数小时的搜索，我发现最好的解决方案是在需要className的组件上添加一个样式化的父组件（可以是div），然后将className的定义直接添加到该样式化的父组件中。

>

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

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

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