vue.js 设置Quasar q-select样式

vlf7wbxs 于 2023-06-24 发布在 Vue.js

关注(0)|答案(1)|浏览(337)

我一直在浪费大量的时间试图让它工作，但我无法弄清楚为我的生活。我想更改边框颜色和文本颜色和下拉图标。我在作用域组件中使用了下面的样式，它没有任何变化：

.q-field--outlined .q-field__control:before {
       border: 1.25px solid rgb(98 0 255 / 48%);
       transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
    }

文本颜色我可以使用标签核心标签，但这不会改变下拉按钮的图标颜色。所以我需要一个更好的解决方案。顺便说一句，我只是试图改变输入框区域中文本的颜色，而不是实际的下拉选择面板。

vue.js

来源：https://stackoverflow.com/questions/76442297/styling-quasar-q-select

1条答案

按热度按时间

laawzig21#

因为q-select是一个子组件，所以作用域样式不会影响它（作用域样式特别意味着不会将其样式泄漏给子组件）。
当您确实希望作用域样式化影响子组件时，可以使用：deep（）

<style scoped>
:deep(.q-field--outlined .q-field__control:before) {
  border: 1.25px solid rgb(98 0 255 / 48%);
  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

赞(0）回复(0）举报 2023-06-24

我来回答

vue.js 设置Quasar q-select样式

1条答案

相关问题

热门标签

最新问答