扩展/覆盖导入的 React 组件的样式

Question

我有两个组件，为了简洁起见，我在这里简化了代码... 问题是，当我导入 ComponentB 以用作 ComponentA 的子级时，我似乎无法更改 ComponentB 的样式。

我正在使用样式化组件仅供参考。

示例：
在 ComponentA 中，我正在导入 ComponentB。 ComponentB 是一个独立的组件，它封装了自己的样式和逻辑。在 ComponentA 中使用时，我需要覆盖/扩展一些 ComponentB 样式。

这是一个代码示例：

// ComponentB
import React from "react";
import * as S from "./ComponentB.styles"; // styled components

export function ComponentB() {
  return (
    <S.Container>
      <S.Content
        {...props}
      />
    </S.Container>
  )
}

// ComponentA file
import React from "react";
import { ComponentB } from "./ComponentB";
import * as S from "./ComponentA.styles"; // styled components

export function ComponentA() {
  return (
    <S.Container>
      <S.Content
        <ComponentB {...props} /> // I need to use ComponentB but change its styling
      />
    </S.Container>
  )
}

如何将 ComponentB 用作 ComponentA 的子级，但要更改它的一些样式？

Answer 1

ComponentB 不使用任何道具，因此您传递给它的任何内容都将被完全忽略。您需要编辑您的组件，以便一些样式道具可以一直传递到 DOM。

这取决于您如何实现覆盖样式。它是className 还是CSSProperties 对象？样式是否适用于S.Container，S.Content，或者您可以通过名称为containerStyle 和contentStyle 的单独道具来设置样式？

您可以将整个 ComponentB 包装在 styled(ComponentB) 声明中，这样可以创建具有正确样式 (docs link) 的 className 道具。为了让它工作，你的ComponentB 必须接受这个className 并传递它，以便它最终连接到 DOM。