更改 Button onClick MUI 的变体

Question

我想在单击时更改 Button 组件的变体，从 'outlined' 到 'contained':

<Button variant='outlined'>Click me to change my variant to contained</Button>

在 MUI 中可以吗？使用 React 引用？或者我怎样才能做到这一点？

Answer 1

你可以这样实现：

import React, { useState } from 'react';


    function App() {
      const [currentButtonVariant, setCurrentButtonVariant] = useState('outlined');
    
      const handleButtonVariantChange = () => {
        if (currentButtonVariant === 'outlined') {
          setCurrentButtonVariant('contained');
        }
        else {
          setCurrentButtonVariant('outlined');
        }
      }
    
      return (
        <div className="App">
            <Button variant={currentButtonVariant} onClick={handleButtonVariantChange}>Click me to change my variant to contained</Button>
        </div>
      );
    }

更改 Button onClick MUI 的变体

changing the variant of the Button onClick MUI

material-ui