使用样式化组件定位特定的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

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

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

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

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