buefy 输入不改变边框样式颜色

Question

我想更改 b-input buefy 的样式，但是当我尝试更改设计时它不起作用。

这是我的代码。

<b-field>
<b-input
placeholder="Username"
size="is-medium"
></b-input>
</b-field>


<style>
input.input.is-medium {
    border: 1px solid red;
}
</style>

Answer 1

如果您想更改所有按钮，请查看 Bulma 的变量。

Buefy 使用 Bulma CSS

https://bulma.io/documentation/elements/button/#variables

在这里，你会想要改变$button-border-color

Answer 2

迟到的答案。

选择器似乎是正确的，所以我不确定为什么它不适合您。您的示例适用于我的环境（Buefy 0.9.4、Vue 2.6.10）。

您可以尝试使用不太具体的选择器：

input {
  border: 1px solid red;
}

或者...（畏缩）使用重要标志：

input.input.is-medium {
  border: 1px solid red !important;
}

要仅自定义单个输入，请尝试将 ref 属性分配给 <b-input>，然后使用 JS 更新样式。请注意，<b-input> 创建了一个 <div> 来包装 <input>，因此我们必须使用 $el 和 querySelector 来寻找它。

Buefy HTML

<b-input
  ref="myInput"
  placeholder="Username"
  size="is-medium"
></b-input>

VueJS

mounted() {
  this.$refs.myInput.$el.querySelector('input').style.border = "1px solid red";
},

buefy 输入不改变边框样式颜色

buefy input not changing border style color

vue.js

buefy