如何在 React Styled Components 中僅為一個道具制作多種樣式？

Question

我在 React 中使用了樣式化組件，並且我只想為一個道具包裝我想要的所有樣式（這是一個條件道具）。 現在我有這樣的事情：

<ContentSty
    flexDirection={abilityScores ? "column" : "row"}
    flexWrap={abilityScores ? "no-wrap" : "wrap"}
    cardDisplay={abilityScores ? "flex" : "block"}
    cardHeight={abilityScores ? "auto" : "5rem"}
    cardTextMargin={abilityScores ? "auto 0.5rem" : "0.2rem 0"}
    hoverShadow={abilityScores ? "none" : "0px 0px 14px gold"}
    hoverCursor={abilityScores ? "auto" : "pointer"}
>

我總是做同樣的檢查：如果變量abilityScores === true那么有這個值，否則有另一個。 然后，在我的風格中，我有很多some-css-prop: ${(props) => props.someProp}; 它變得有點凌亂

有沒有辦法將abilityScores === true所有樣式都包裝在一個道具中，然后只傳遞一個獨特的道具，如abilityScore={abilityScore === true ? allTheseStylings : ''} abilityScore={abilityScore === true ? allTheseStylings : ''} ，或者更abilityScore={abilityScore === true ? allTheseStylings : ''}方式，而不是僅僅制作很多道具？

Answer 1

在此處查看有關StyleObjects的文檔： https : StyleObjects

您可以使用abilityScore的props來有條件地設置組件的樣式。

例如：

const ContentSty = styled.div(props => ({
  flexDirection: props.abilityScores ? "column" : "row",
  flexWrap: props.abilityScores ? "no-wrap" : "wrap",
  cardDisplay: props.abilityScores ? "flex" : "block",
  cardHeight: props.abilityScores ? "auto" : "5rem",
  cardTextMargin: props.abilityScores ? "auto 0.5rem" : "0.2rem 0",
  hoverShadow: props.abilityScores ? "none" : "0px 0px 14px gold",
  hoverCursor: props.abilityScores ? "auto" : "pointer",
});

...

<ContentSty abilityScores={true} />