如何修改Vuesax vs-input禁用状态下内部输入框的CSS及动态样式？

这个问题的核心是Vue的scoped样式隔离导致你写的CSS无法穿透到Vuesax组件内部的输入框元素，加上Vuesax组件在禁用状态下会给根元素添加特定类，我们可以通过深度选择器来精准定位并修改样式。

具体解决方案 #

在你的组件的<style scoped>标签中添加以下CSS代码：

/* Vue 3 及支持::v-deep的版本 */
::v-deep .vs-input--disabled .vs-input--input {
  border: 1px solid #ff0000 !important;
  /* 可根据需求添加其他样式，比如背景色、字体颜色等 */
  /* background-color: #f5f5f5; */
}

/* 如果是Vue 2，可替换为/deep/语法 */
/* /deep/ .vs-input--disabled .vs-input--input {
  border: 1px solid #ff0000 !important;
} */

为什么之前的方法无效？ #

• 行内样式style="border: 1px solid #ff0000;"是直接作用在<vs-input>根组件上，而内部输入框是它的子元素，边框属性不会自动继承到子元素。
• 直接写.vs-input--input的样式在scoped标签中时，Vue会自动为样式添加作用域属性（比如[data-v-xxxxxx]），但Vuesax组件内部的元素并没有这个属性，所以样式无法生效。
• 动态绑定:style到<vs-input>组件同样只会作用于根元素，无法直接影响内部的输入框DOM。

额外说明 #

• 如果你不想使用scoped样式，也可以把这段CSS写在全局的<style>标签中，但这样可能会影响项目中所有的禁用状态vs-input组件，需要谨慎使用。
• 使用!important是为了覆盖Vuesax默认的禁用状态样式，如果你的样式优先级足够高（比如组合了更多类选择器），也可以去掉!important。

内容的提问来源于stack exchange，提问作者theflucs