如何使用带样式的组件设置<button>的多个变体的样式

<!-- 带样式的组件定义 -->
<style>
  .primary-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }

  .secondary-button {
    background-color: #6c757d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>

<!-- 创建<button>元素的实例 -->
<div id="button-container"></div>

<script>
  // 带样式的组件类
  class StyledButton {
    constructor(containerId, variant) {
      this.container = document.getElementById(containerId);
      this.variant = variant;
    }

    render() {
      const button = document.createElement('button');
      button.textContent = 'Button';
      button.className = this.variant === 'primary' ? 'primary-button' : 'secondary-button';

      this.container.appendChild(button);
    }
  }

  // 创建不同样式变体的<button>元素实例
  const primaryButton = new StyledButton('button-container', 'primary');
  const secondaryButton = new StyledButton('button-container', 'secondary');

  // 渲染<button>元素
  primaryButton.render();
  secondaryButton.render();
</script>