Question

我正在尝试找到一种方法来用样式化组件覆盖样式化组件，如下所示：

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

class Wrapper extends Component {

  ...

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

export default Wrapper

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

import Wrapper from './Wrapper'

class B extends Component {

  ...

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

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

Answer 1

您是否考虑过使用“样式化组件”中的extend？ Styled使用新类生成新的组件样式，而extend则是使用其他样式组件的基础样式，然后进行调整或添加其他样式。

此外，他们的文档解释了何时应使用styled()（请参阅“何时应使用styled()？”一节） when to use styled

Answer 2

您只需将 className 传递给样式组件并参考该类进行样式设置即可覆盖样式组件

<myNewWrap className="my-wrap">

Answer 3

尝试使用padding: 5px !important代替padding: 5px;

在React中重写样式组件

3 个答案: