如何在 React Styled Components 中只为一个道具制作多种样式？答案

【问题标题】：How can I make multiple styling for only one prop in React Styled Components?如何在 React Styled Components 中只为一个道具制作多种样式？
【发布时间】：2021-09-02 10:33:00
【问题描述】：

我在 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 的所有样式包装在一个 prop 中，然后只传递一个独特的 prop，如 abilityScore={abilityScore === true ? allTheseStylings : ''}，或者更简洁的方式，而不是只制作很多 prop？

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

在此处查看StyleObjects 上的文档：https://styled-components.com/docs/advanced#style-objects

您可以使用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} />

【讨论】：