使用样式化组件针对特定 CSS 类

Question

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

Answer 1

由于 styled-components 只是 CSS™，您可以像使用任何其他样式 sheet 一样使用它，方法是使用 react-datepicker 提供的 class 名称.

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

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

<Wrapper>
  <Datepicker />
</Wrapper>

编辑：根据另一个答案，& 和句点 . 之间需要一个 space。

Answer 2

找了几个小时，我发现最好的解决方案是添加一个程式化的父组件（它可以是一个div）覆盖在需要类名的组件上，并将类名的定义直接添加到程式化的父组件。

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>

Answer 3

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

<Wrapper>
  <Datepicker />
</Wrapper>

使用样式化组件针对特定 CSS 类

Target specific CSS classes with Styled Components

reactjs

styled-components