mui中button按钮一点击会变颜色

在 MUI 中，Button 按钮是一种常见的用户交互元素，我们可以通过简单的代码实现按钮点击后变色的效果。

要实现按钮点击后变色，我们可以使用 MUI 提供的属性和样式。

首先，我们需要为按钮添加 onClick 属性，将点击事件与相应的处理函数关联起来。在处理函数中，我们可以使用 state 来控制按钮的颜色。

import React, { useState } from 'react';
import Button from '@mui/material/Button';

const MyButton = () => {
  const [buttonColor, setButtonColor] = useState('primary');

  const handleClick = () => {
    // 在点击事件中修改按钮的颜色
    setButtonColor('secondary');
  };

  return (
    <Button color={buttonColor} onClick={handleClick}>
      我是按钮
    </Button>
  );
};

在上述代码中，我们创建了一个名为 `MyButton` 的组件。使用 `useState` 钩子函数创建了一个 `buttonColor` 状态变量，并将其初始值设置为 `primary`。

然后，我们创建了一个名为 `handleClick` 的点击事件处理函数。在该函数中，我们通过调用 `setButtonColor` 更新 state 来将按钮的颜色修改为 `secondary`。

最后，在组件的返回部分，我们使用 MUI 的 Button 组件，并将 `color` 属性绑定到 `buttonColor` 变量，将按钮的颜色设置为 `primary` 或 `secondary`。

这样，当按钮被点击时，它的颜色将变为 `secondary`。

以上就是一种简单的使用 MUI 实现按钮点击变色的方法。当然，你也可以根据自己的需求自定义按钮样式，并根据实际情况调整按钮颜色的变化逻辑。