Vuetify v-chip同时设置边框与背景的问题求助

Vuetify自带的outlined属性会强制v-chip背景透明，导致自定义背景被覆盖；而默认v-chip没有内置边框样式，直接写边框会因为CSS优先级不够不生效。给你两种实用的解决方式：

方法一：自定义类+选择器优先级提升 #

不用outlined属性，直接给v-chip加自定义类，通过更具体的选择器覆盖内置样式：

<v-chip class="custom-chip">带边框和背景的Chip</v-chip>

全局样式下的CSS：

.v-chip.custom-chip {
  background-color: #e3f2fd; /* 自定义背景色 */
  border: 2px solid #2196f3; /* 自定义边框 */
  color: #1976d2; /* 可选：调整文字颜色 */
}

如果是Vue单文件组件的scoped样式，需要添加深度选择器：

::v-deep .v-chip.custom-chip {
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  color: #1976d2;
}

方法二：结合outlined属性强制修改背景 #

如果偏好使用outlined属性，只需强制覆盖它的透明背景即可：

<v-chip outlined class="outlined-with-bg">带边框和背景的Chip</v-chip>

CSS：

.outlined-with-bg {
  background-color: #e3f2fd !important;
}

这种方式更简洁，但!important尽量少用，优先选择方法一的选择器优先级提升方案。

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