javascript - 在包装器中设置样式化组件的样式

Question

我想向已设置样式的按钮添加动画和特定高度。问题是，我的 StyledButton 是一个包装器，它可以根据样式为 React Semantic UI Buttons 的 type 属性呈现多个预先设置样式的按钮之一。 .

在此处查看带有复制的 CodeSandbox:

https://codesandbox.io/embed/practical-haibt-oz9sl

问题是它确实从 ActionButton 获取样式，但它不应用我在 const AnimatedButton = styled(StyledButton) 上放置的任何样式。

但是，如果我在没有包装器的情况下尝试同样的事情，直接通过导入 BaseButton 并创建一个 AnimatedBaseButton，这个可以工作但是 消除了具有返回预样式按钮的 type 属性的模块化。

我在这里和 google/github 上搜索过，但没有反射(reflect)这一问题的问题。我知道我可以在 StyledButton 上添加一个 animation 属性并传递它，但是对于真正的代码库，这是不可能的。

提前致谢!

编辑:添加了一个 Codesandbox 而不是代码示例。

Answer 1

快速修复:

在 StyledButton.js 中:

render() {
  const {
    content,
    icon,
    iconPosition,
    onClick,
    type,
    ...otherProps // take base props passed through wrapper
  } = this.props;

  // ...

  return (
    <ButtonToDisplay
      {...otherProps} // spread it firstly here so below props can override
      onClick={onClick}
      content={content}
    />
  );
}

为什么有效:

如您所见，我们用来设置组件样式的 styled(comp)'' 语法实际上是一个 HOC 组件，它接受一个组件并返回另一个组件。

所以当你制作一个在styled component和real component之间进行拦截的包装器时，你需要允许props由图书馆通过那个包装器。