Question

我正在使用名为“Dialog”的第三方组件，其中包含以下渲染方法。如您所见 - 该组件具有多个className。我想创建一个名为StyledDialog的样式组件，它包含一个prop，它允许我覆盖与具有“SURFACE”className的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

根据您的解释，我认为您应该使用=SumByColor(A1:S3,T7)方法包装此第三方组件，并通过从包装的样式化组件引用该组件的相应类名来应用您的样式。

例如，如果现有组件的名称为styled，您可以在Hello上对其任何DOM子项应用样式，如下所示：

styled-component

Working Demo

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

1 个答案: