请教一个关于组件复用的问题

#1

小弟是新手。最近在用使用AntD的组件做一点东西。碰到组件封装复用的问题,情况是这样的:
1:我利用了AntD的 文本框组件,带前置标签(addonBefore),现在我想在页面上改变这个带标签的文本框在页面上的位置,直接按照下面的写法

显示出来的结果是这样,只有文本框的位置变化,前置标签位置没有变化
所以,我把这个组件封装一下

现在显示的结果正常了
现在的问题在于,我要开发的页面上需要放置很多个这样的文本框,而且宽度等样式信息都还不一样,所以我想用 《InputWithAddonBefore style='XXXXXXX '》这样的方式来把样式信息传递过来?这个组件外面还要嵌套在另一个容器里使用,所以我想问的问题就是:props在父组件中,中间组件该如何给子组件传递props以外的信息呢?或者各位对于这个问题还有更好的解决办法,希望不吝赐教

#2
function InputWithAddonBefore({style, ...otherProps}) {
  return (
    <div className="input" style={style}><Input {...otherProps} /></div>
  )
}