在React中覆盖样式组件

Question

我试图找到一种方法来覆盖样式组件与样式组件，如下所示：

假设我有一个可重用的组件Wrapper：

class Wrapper extends Component {

  ...

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

export default Wrapper

然后我有组件B导入Wrapper但是应该扩展这样的样式：myNewWrap使用Wrapper

import Wrapper from './Wrapper'

class B extends Component {

  ...

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

结果应该是一些令人敬畏的文本具有来自Wrapper的填充但是来自自己组件的背景颜色。但我得到的只是Wrapper的风格。

Answer 1

您是否考虑过使用Styled-Components的extend？ Styled使用新类生成新的组件样式，而extend意味着使用来自另一个Styled组件的基本样式，但随后调整或添加其他样式。

另外，他们的文档解释了你何时应该使用styled()（参见“我应该何时使用styled()？”一节）when to use styled

Answer 2

尝试使用padding: 5px !important而不是padding: 5px;