如何根据REACT中的值更改引导按钮的大小

import React, { useState } from 'react';

function App() {
  const [buttonSize, setButtonSize] = useState('small');

  // 其他组件代码...

  return (
    <div>
      <button className={`button-${buttonSize}`}>引导按钮</button>
    </div>
  );
}

export default App;

function App() {
  const [buttonSize, setButtonSize] = useState('small');

  const handleButtonClick = () => {
    // 根据条件更改按钮大小的值
    if (buttonSize === 'small') {
      setButtonSize('large');
    } else {
      setButtonSize('small');
    }
  };

  return (
    <div>
      <button className={`button-${buttonSize}`} onClick={handleButtonClick}>
        引导按钮
      </button>
    </div>
  );
}

.button-small {
  font-size: 12px;
  padding: 5px 10px;
}

.button-large {
  font-size: 16px;
  padding: 10px 20px;
}