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

Question

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

请参阅此处的 CodeSandbox 复制品：

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

问题是它确实从 中获取了样式ActionButton，但它并不应用我在const AnimatedButton = styled(StyledButton).

但是，如果我在没有包装器的情况下尝试相同的操作，直接导入BaseButton并创建，则此方法可以工作，但会删除返回预样式按钮的道具AnimatedBaseButton的模块化性。type

我在此处和 google / github 上进行了搜索，但没有反映此问题的问题。我知道我可以animation在 上添加一个属性并StyledButton传递它，但对于真正的代码库，这是不可能的。

提前致谢 ！

编辑：添加了 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 组件，它接收一个组件并返回另一个组件。

因此，当您制作一个在 astyled component和 the之间进行拦截的包装器时real component，您需要允许props库生成的内容通过该包装器。