reactjs 如何在单击时更改基本Web按钮组件的样式？

rjee0c15 于 2023-01-17 发布在 React

关注(0)|答案(1)|浏览(137)

我想使用React在单击按钮时更改基本Web按钮组件的颜色和背景色。如何在单击按钮时更改按钮的样式？
我尝试使用$isSelected prop来检测点击，但这对我没有帮助。

import { Button } from 'baseui/button'

...

<Button
  kind="secondary"
  size="compact"
  shape="pill"
  overrides={{
    BaseButton: {
      style: ({ $isSelected }) => ({
        color: $isSelected ? 'white' : 'black',
        backgroundColor: $isSelected ? 'black' : 'white',
      }),
    },
  }}
>
  Hello
</Button>

我该怎么办？

reactjs

来源：https://stackoverflow.com/questions/75132245/how-to-change-the-styles-of-base-web-button-component-on-click

1条答案

按热度按时间

u1ehiz5o1#

您可以创建保存true或false值的状态，然后根据按钮是否被单击来设置按钮的样式。

import * as React from "react";
import { Button } from "baseui/button";

export default () => {
  const [clicked, setClicked] = React.useState(false);
  return (
    <Button
      kind="secondary"
      size="compact"
      shape="pill"
      overrides={{
        BaseButton: {
          style: () => ({
            color: clicked ? "white" : "black",
            backgroundColor: clicked ? "black" : "white",
          }),
        },
      }}
      onClick={() => setClicked(!clicked)}
    >
      Hello
    </Button>
  );
};

代码和框：https://codesandbox.io/s/base-web-button-forked-gvxi2v?file=/src/example.js:513-523
直接从https://baseweb.design/components/button派生的示例
如果您想创建许多这样的按钮，可以将示例提取到它自己的组件中，并根据需要多次呈现它们，每个按钮都将具有自己的单击状态。

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 如何在单击时更改基本Web按钮组件的样式？

1条答案

相关问题

热门标签

最新问答