Vue.js buefy输入不更改边框样式颜色

我想更改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>

input.input.is-medium{
边框：1px纯红；
}

---

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

Buefy使用Bulma CSS

在这里，您需要更改

$按钮边框颜色

延迟回答

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

您可以尝试不太特定的选择器：

input {
  border: 1px solid red;
}

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

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

---

要自定义单个输入，请尝试将

ref

属性指定给

，然后使用JS更新样式。请注意，

创建了一个包装

的

，因此我们必须使用$el和querySelector查找它

Buefy HTML

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

---

如果我只想更改特定按钮或特定按钮子集的CSS样式，该怎么办？也许我完全误解了bulma（和其他CSS框架）的概念，但我认为它为我提供了CSS样式的坚实基础，我可以在需要的地方更改和覆盖它们。bulma为你的应用程序创建了一个全局主题。如果你需要定制一个精确的按钮，你必须创建你自己的CSS类来覆盖Bulma。因此，在这种情况下，我需要一个组件，看起来与其他组件非常相似，但只是在某种程度上进行了一点修改，而不是Bulma提供的，我必须从头开始编写样式，并尝试适应Bulma布局？

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