如何在样式化组件之外设置样式？

Question

我确定，有办法解决这个问题，但我找不到。 我有一个反应组件GenericList，它是一个具有 CRUD 功能的列表。它内部有自己的Popup。

<GenericList
  popupContent={(
    <CharterPeriodsPopup
      charter={charter}
    />
  )}

这是 GenericList 中的代码

<Popup
  bodyClassName={this.props.bodyClassName}
  contentClassName={this.props.contentClassName}
  title={title}
  {...this.props.popupProps}
>
  {!popupContent ? '$popupContent': (
           cloneElement(this.props.popupContent, {...popupProps}))}
</Popup>

我想访问 GenericList 中的 Popup 并通过样式化组件为其设置样式。但我无法直接访问它。

查看我下载的屏幕。

我需要访问弹出框。 使用 SCSS，我们只需设置 classNames 并将其导入 react 组件即可。但是对于 styled-components，我们有一个特定的范围，它只与 styled 组件部分相关。 我为 CharterPeriodsPopup 创建了样式组件。

Answer 1

来自docs：

将现有的 CSS 框架与 styled-components 集成起来非常简单！您可以在组件旁边使用其现有的类名。

例如，假设您有一个现有应用程序，其中包含两个要再次使用的类：.small 和 .big。如果您希望类始终附加到组件，则应使用the attrs method 附加它。如果您只想在某些情况下附加它，您可以像往常一样使用 className 道具！

// Using .attrs, we attach the .small class to every <Button />
const Button = styled.button.attrs(props => ({
  className: "small",
}))`
  background: black;
  color: white;
  cursor: pointer;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Styled Components</Button>
    {/* Here we attach the class .big to this specific instance of the Button */}
    <Button className="big">The new way to style components!</Button>
  </div>
);