Bulma：无法在按钮上同时使用 is-static 和 is-primary 修改

Question

我想使用 Bulma 创建一个非交互式按钮和一个 "primary" 按钮。这是我的尝试：

<span class="button is-primary is-static">Hello World</span>

当我这样做时，我得到了一个标准外观的非交互式按钮。它是灰色的，不可点击（这不是禁用按钮）。 is-primary 修饰符似乎对按钮没有影响，我不确定为什么。如果我改为删除 is-static 修饰符，我会得到一个看起来很正常的 "primary" 按钮。

我找到了一个 hack-ish 解决方案（通过执行以下操作），但更愿意使用 Bulma 提供的修饰符。

.button.non-interactive {
    background-color: $my-custom-primary-color !important;
    color: $white !important;
    border: hsl(0, 0%, 86%);
}

<span class="button non-interactive is-static">Hello World</span>

Answer 1

那是因为 is-static 的颜色属性覆盖了 is-primary。
我发现这种行为很正常，因为带有颜色的静态按钮看起来并不像静态按钮...
可以肯定的是，我创建了以下按钮：左边是一个带 is-primary 的按钮，右边是一个带 is-static 和 non-reactive 的按钮，用你的代码复制了我的代码原色。

而且我在设计上没有发现任何差异，我只是注意到指针事件被禁用并且是正确的，所以我检查了控制台以验证 is-static 在右键：

事实上，is-static 只是禁用 pointer-events 和 box-shadow（在这种情况下对 box-shadow 无用）。

所以如果你想要一个带颜色的非交互式按钮，我建议你使用这个 class :

.button.non-interactive {
    pointer-events: none;  /* Imitate the behavior of is-static class */
    box-shadow: none;  /* Optional, it might be useful in cases where the button is in a container with a box-shadow */
}

并在您的按钮中使用 is-primary 或任何其他颜色 class :

<span class="button non-interactive is-primary">Hello World</span>

Bulma：无法在按钮上同时使用 is-static 和 is-primary 修改

Bulma: Unable to use both is-static and is-primary modifies on a button

css

bulma