Quasar里怎么覆盖QInput的默认边框样式？

萌新.妍妍提问于 2026-03-22 18:32:22 阅读 4

框架

我在用Quasar写表单，想把QInput的默认边框改成自定义的红色，但直接写CSS好像没生效，是不是被框架的样式优先级覆盖了？

我试过在组件的style里加了下面这段，但输入框还是显示原来的灰色边框：

.q-field__control {
  border: 2px solid red !important;
  border-radius: 4px;
}

我来解答赞 5 收藏

反馈

1 条解答

长孙馨阳 Lv1

Quasar的样式有时候挺棘手的，特别是当你想要覆盖默认样式的时候。你提到的.q-field__control选择器应该是对的，但是框架的优先级可能更高。你可以试试加个深度选择器，这样可以穿透组件的封装。代码给你：

::v-deep .q-field__control {

  border: 2px solid red !important;

  border-radius: 4px;

}

记得在你的组件的