在第三方组件中设置子元素的样式答案

【问题标题】：Styling a child element in a third-party component在第三方组件中设置子元素的样式
【发布时间】：2018-05-25 14:25:45
【问题描述】：

我正在使用名为“Dialog”的第 3 方组件和下面的渲染方法。如您所见 - 组件有多个类名。我想创建一个名为 StyledDialog 的样式化组件，其中包含一个道具，可以让我覆盖与具有“SURFACE”类名的 div 关联的宽度。这可以通过 Styled-Components 完成吗？或者我需要将源代码引入我的应用程序并手动处理。

render() {
  const { className, children, onClose, open, ...otherProps } = this.props;
  const ariaHiddenProp = open ? {} : { 'aria-hidden': true };

  return (
    <aside
      className={classnames(
        ROOT, 
        {
          [ANIMATING]: this.state.animating,
          [OPEN]: open,
        }, 
        className
      )}
      onClick={(e) => { 
        if (onClose) onClose(e); 
      }}
      onTransitionEnd={() => { 
        this.setState({ animating: false }); 
      }}
      {...ariaHiddenProp}
    >
      <div
        className={SURFACE}
        onClick={(e) => { 
          e.stopPropagation(); 
        }}
        {...otherProps}
      >
        {children}
      </div>
      <div className={BACKDROP} />
    </aside>
  );
}

【问题讨论】：

标签： styled-components

【解决方案1】：

根据您的解释，我认为您应该使用 styled 方法包装此第 3 方组件，并通过从包装样式组件中引用该组件的相应类名来应用您的样式。

例如，如果现有组件的名称是 Hello，您可以将来自 styled-component 的样式应用到它的任何 DOM 子节点上，如下所示：

const StyledHello = styled(Hello)`
    .${classes.SURFACE} {
        width: 10rem;
        border: 2px solid green;
    }
`;

Working Demo

【讨论】：