快速修复：

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上进行了搜索，但是没有反映这一点的问题。我知道我可以在animation上添加一个StyledButton属性并传递它，但是使用真实的代码库是不可能的。

谢谢！

EDIT：添加了一个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通过该包装器。

Answer 2

您在破坏...的过程中忘记了this.props（扩展运算符）

export default class StyledButton extends React.Component {
  render() {
    //     added ... (spread operator) 
    const {type, ...additionalProps} = this.props
    if (type === 'normal') return <NormalButton {...aditionalProps} />
    else if (type === 'action') return <ActionButton {...aditionalProps} />
  }
}

这里发生的是styled-component传递了style道具中的样式，但是如果没有传播运算符，您就不会传递它，而只是得到了一个名为{ {1}}。

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

2 个答案:

快速修复：

为什么起作用：