反应如何使用样式化组件更改按钮的背景答案

【问题标题】：React how to change background of button with styled components反应如何使用样式化组件更改按钮的背景
【发布时间】：2021-03-30 15:22:03
【问题描述】：

我在我的应用中实现了按类别过滤，所以如果你点击按钮，它会过滤掉指定的类别。我还想在用户单击按钮时更改按钮的背景颜色，以便您可以直观地看到选择了哪个类别 .

我正在使用样式组件进行样式设置，但我无法访问样式组件中的状态，所以我不知道是否可以比较它是否被单击。

我通过样式组件中的道具尝试了它，但它对我不起作用。所以问题是当按钮处于活动状态时更改按钮背景的最简单方法是什么。

【问题讨论】：

【解决方案1】：

您不能将key 用作道具，因为它是由内部反应使用的。

您可以简单地设置另一个道具并引用它，它会起作用：

<StyledButton
  category={category}
  buttonCategory={item} //new prop
  key={item}
  onClick={() => {
    setCategory(item);
  }}
>

然后只需更新您的三元：

prop.buttonCategory === prop.category ? "#23d997" : null;

【讨论】：