使用react-pose时对div上的动画填充

Question

在我的react应用程序中，我试图为圆形按钮设置动画以使其内部带有输入框成为矩形。

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import posed from "react-pose";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell } from "@fortawesome/free-regular-svg-icons";
import "./styles.css";

const NotificationButtonWrap = posed.div({
  inactive: { width: 80, borderRadius: 50 },
  active: { width: 310, borderRadius: 5, padding: 10 }
});

const EmailInput = posed.input({
  inactive: { width: 0 },
  active: { width: 300, margin: 10 }
});

class Example extends React.Component {
  state = { isActive: true };

  componentDidMount() {
    setInterval(() => {
      this.setState({ isActive: !this.state.isActive });
    }, 1000);
  }

  render() {
    const { isActive } = this.state;
    return (
      <NotificationButtonWrap
        className="notification__wrapper"
        pose={isActive ? "active" : "inactive"}
      >
        <EmailInput
          className="notification__input"
          pose={isActive ? "active" : "inactive"}
        />
        <FontAwesomeIcon className="notification__icon" icon={faBell} />
      </NotificationButtonWrap>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

这是a Sandbox。

我希望NotificationButtonWrap元素周围有填充，但是我没有得到，我不确定为什么。