Reactjs 覆盖React中的样式化组件

我试图找到一种方法，用如下样式化组件覆盖样式化组件：

假设我有一个可重用的组件包装器：

class Wrapper extends Component {

  ...

  render() {
    const Wrap = styled.div`
      padding: 5px;
      background-color: green;
    `;
    return (
       <Wrap>
         {children}
       </Wrap>
    )
  }
}

export default Wrapper

类包装器扩展组件{
...
render（）{
const Wrap=styled.div`
填充物：5px；
背景颜色：绿色；
`;
返回(
{儿童}
)
}
}
导出默认包装器

然后我有了组件B，它导入了包装器，但应该像这样扩展样式：myNewWrap使用包装器

从“./Wrapper”导入包装器
类扩展组件{
...
render（）{
const myNewWrap=styled（包装器）`
背景色：红色；
`;
返回(
一些很棒的文字
)
}
}

---

结果应该是一些很棒的文本有来自包装器的填充，但有来自自己组件的背景色。但我得到的只是包装器中的样式。

尝试使用

填充：5px！重要信息

而不是

填充：5px
您是否考虑过从样式化组件中使用
扩展
Styled
使用新类生成新的组件样式，而
extend
旨在使用另一个样式化组件的基本样式，但随后调整或添加其他样式

此外，他们的文档解释了何时应该使用
styled（）
（请参阅“何时应该使用
styled（）
？”一节）
请使用chrome inspector检查您的B类是否具有填充样式&如果是，则使用填充：5px！重要而非填充：5px；在你的包装类中。填充应该保持不变，只有背景颜色应该改变。除此之外，英国电信还将其标记为！重要提示：这不起作用。请检查组件B的样式（使用chrome inspector），它是否具有填充属性？我创建了一个沙盒来显示我的问题，它在那里工作。所以我一定是在我的真实环境中做错了什么。
import Wrapper from './Wrapper'

class B extends Component {

  ...

  render() {
    const myNewWrap = styled(Wrapper)`
      background-color: red;
    `;
    return (
       <myNewWrap>
         Some awesome text
       </myNewWrap>
    )
  }
}