擴展/覆蓋導入的 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。