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

【问题标题】：buefy input not changing border style colorbuefy 输入不改变边框样式颜色
【发布时间】：2020-05-28 04:30:09
【问题描述】：

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

【问题讨论】：

标签： vue.js buefy

【解决方案1】：

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

Buefy 使用 Bulma CSS

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

在这里，您将要更改$button-border-color

【讨论】：

如果我只想更改特定按钮或特定按钮子集的 CSS 样式，该怎么办？也许我完全误解了 bulma（和其他 CSS 框架）的想法，但我认为它为我提供了 CSS 样式的坚实基础，我可以在需要的地方更改和覆盖它们。
Bulma 为您的应用程序创建一个全局主题。如果你需要自定义一个精确的按钮，你必须创建自己的 CSS 类来覆盖 Bulma。
所以对于我需要一个组件的情况，看起来大部分看起来像其他组件，但只是在某种程度上进行了一些修改，而不是由 Bulma 提供，我必须从头开始编写样式并且必须尝试调整 Bulma 布局？

【解决方案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> 创建了一个包装 <input> 的 <div>，因此我们必须使用 $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";
},

【讨论】：