如何自定义Vuestic输入组件宽度？无对应Props怎么办？

方法1：用CSS深度选择器强制覆盖样式 #

Vuestic组件的样式会被Vue的scoped样式隔离，直接用深度选择器穿透修改内部宽度：

<template>
  <div class="form-group">
    <va-input label="文本框" />
    <va-select label="选择框" :options="options" />
    <va-textarea label="文本域" />
  </div>
</template>

<style scoped>
/* Vue 3 用 :deep()，Vue 2 用 ::v-deep 或 /deep/ */
.form-group :deep(.va-input),
.form-group :deep(.va-select),
.form-group :deep(.va-textarea) {
  width: 320px; /* 自定义目标宽度 */
}

/* 精准控制输入框内部容器 */
.form-group :deep(.va-input__input-wrapper) {
  max-width: 400px;
}
</style>

方法2：通过包裹容器控制宽度 #

给组件套一层容器，利用容器宽度限制组件，无需穿透样式，更干净：

<template>
  <div class="custom-width-box">
    <va-input label="固定宽度文本框" />
  </div>
  <div style="width: 60%; margin-top: 1rem;">
    <va-select label="响应式选择框" :options="options" />
  </div>
</template>

<style scoped>
.custom-width-box {
  width: 280px;
}
/* 让组件继承容器宽度 */
.custom-width-box :deep(.va-input) {
  width: 100%;
}
</style>

方法3：全局统一配置样式 #

如果要所有同类型组件统一宽度，在全局样式文件（比如global.css）中添加：

.va-input, .va-select, .va-textarea {
  width: 350px;
}

/* 针对聚焦状态调整 */
.va-input--focused {
  max-width: 420px;
}

注意事项 #

• 适配Vue版本：Vue 3用:deep()，Vue 2用::v-deep或/deep/
• 优先用容器包裹的方式，减少深度选择器带来的样式污染
• 结合max-width/min-width可实现响应式宽度控制

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