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

【问题标题】：Target specific CSS classes with Styled Components使用样式化组件定位特定的 CSS 类
【发布时间】：2017-12-31 06:35:45
【问题描述】：

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

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

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

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

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

<Wrapper>
  <Datepicker />
</Wrapper>

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

【讨论】：

WHHAAAAAAA????你们让这个库太容易使用了??? 感谢您为它付出的所有努力。
我遇到了同样的问题。这主要对我有用，除了我不能使用&，我的选择器必须符合.react-datepicker {...}
超级重要：& 和 .react-datepicker 之间有一个空格，这对于此答案按预期工作至关重要。
@mxstbr 感谢您创建样式化组件库。我每天都用它

【解决方案2】：

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

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

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

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

【讨论】：

欢迎来到 SO。请解释或强调您的代码为什么/如何解决 OP 的问题。此外，“最好的”是相当自命不凡的、明确的，并且不考虑情况下的细微差别。这是一个很高的标准。然而，在极少数情况下，这可能是真的。还请解释为什么其他方法效果不佳，以支持这一说法。大多数赞成票将来自未来的访问者，他们发现从您的解释中学到的见解有助于解决他们自己的问题。
非常感谢您解释需要和号后面的空格！