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

Question

我正在使用名为 "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>
  );
}

Answer 1

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

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

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

Working Demo

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

Styling a child element in a third-party component

styled-components