在 React 中覆盖样式化组件答案

【问题标题】：Override styled-components in React在 React 中覆盖样式化组件
【发布时间】：2019-01-07 11:31:09
【问题描述】：

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

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

class Wrapper extends Component {

  ...

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

export default Wrapper

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

import Wrapper from './Wrapper'

class B extends Component {

  ...

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

结果应该是 Some awesome text 具有来自 Wrapper 的填充，但来自自己的组件的背景颜色。但我得到的只是 Wrapper 的样式。

【问题讨论】：

请使用 chrome 检查器检查您的 B 类是否具有填充样式，如果是则使用填充：5px ！重要而不是填充：5px；在你的包装类中。

标签： reactjs styled-components

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

<myNewWrap className="my-wrap">

【讨论】：