扩展/覆盖导入的 React 组件的 styles

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不接受任何道具，因此您传递给它的任何内容都将被完全忽略。 您需要编辑您的组件，以便一些样式道具可以 go 一直到 DOM。

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

您可以将整个ComponentB包装在styled(ComponentB)声明中，这样做是使用正确的 styles （文档链接）创建一个className道具。 为了让它工作，你的ComponentB必须接受这个className并传递它，以便它最终附加到 DOM。