如何在 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} />