如何基于Bulma Dropdown自定义独立组件且不覆盖原类及全局变量？

不用局限于@extend，通过命名空间包裹+局部变量覆盖+导入Bulma模块的方式，就能完美实现需求——既不影响原生Dropdown组件，又能在自定义组件中单独调整样式：

实现步骤 #

1. 创建自定义命名空间：用专属类（比如.custom-select-dropdown）作为容器，将Dropdown组件的样式限定在该命名空间内，避免污染原生类。
2. 局部覆盖变量：在命名空间内部修改Bulma Dropdown的变量，这些变量仅作用于当前命名空间下的组件，不会全局生效。
3. 导入Bulma模块：在命名空间内导入Bulma的Dropdown核心SCSS模块，让Bulma的样式规则自动生成在自定义命名空间下，相当于复制了一份独立的Dropdown组件。

具体SCSS代码示例 #

// 自定义下拉选择器的命名空间容器
.custom-select-dropdown {
  // 仅在此作用域内覆盖Dropdown相关变量
  $dropdown-content-radius: 4px; // 替换为你需要的圆角值
  $dropdown-item-hover-background: #f5f5f5; // 自定义选项hover背景色
  $dropdown-item-active-color: #2385bb; // 自定义选中选项的文字颜色

  // 导入Bulma的Dropdown组件模块（路径根据项目实际安装位置调整）
  @import "../node_modules/bulma/sass/components/dropdown/dropdown.sass";
}

HTML使用示例 #

把Bulma Dropdown的标准结构放在自定义命名空间容器内即可：

<div class="custom-select-dropdown">
  <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="custom-select-menu">
        <span>选择偏好设置</span>
        <span class="icon is-small">
          <i class="fas fa-chevron-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="custom-select-menu" role="menu">
      <div class="dropdown-content">
        <a href="#" class="dropdown-item">深色模式</a>
        <a href="#" class="dropdown-item is-active">浅色模式</a>
        <a href="#" class="dropdown-item">自动切换</a>
      </div>
    </div>
  </div>
</div>

方案优势 #

• 原生.dropdown、.dropdown-content等类完全不受影响，可在其他场景正常使用原有功能。
• 自定义组件的样式修改完全隔离，变量仅作用于当前命名空间，不会全局污染。
• 无需手动复制Bulma的Dropdown样式代码，直接复用官方模块，后续Bulma版本升级时也能同步更新自定义组件的基础样式。

内容的提问来源于stack exchange，提问作者Michael Moerman