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

import React, { useState } from 'react';

function ButtonSizeChanger() {
  // 设置初始状态，假设初始大小为 'small'
  const [buttonSize, setButtonSize] = useState('small');

  // 改变按钮大小的函数
  const changeButtonSize = () => {
    setButtonSize(buttonSize === 'small' ? 'large' : 'small');
  };

  // 根据状态设置按钮的类名或内联样式
  const buttonClass = buttonSize === 'small' ? 'btn-small' : 'btn-large';

  return (
    <div>
      {/* 按钮点击时调用 changeButtonSize 函数 */}
      <button className={buttonClass} onClick={changeButtonSize}>
        Click me!
      </button>
    </div>
  );
}

export default ButtonSizeChanger;

.btn-small {
  padding: 5px 10px;
  font-size: 14px;
}

.btn-large {
  padding: 10px 20px;
  font-size: 18px;
}

const buttonStyle = {
  padding: buttonSize === 'small' ? '5px 10px' : '10px 20px',
  fontSize: buttonSize === 'small' ? '14px' : '18px',
};

return (
  <div>
    <button style={buttonStyle} onClick={changeButtonSize}>
      Click me!
    </button>
  </div>
);