Vue项目如何重写vue-simple-accordion组件vsa-item__trigger按钮的SCSS样式

首先明确你当前样式不生效的两个核心原因：

1. 若你的组件style标签添加了scoped属性，Vue会给当前组件的所有原生元素添加自定义data属性前缀，但第三方组件内部的元素不会被添加该前缀，导致scoped作用域下的样式无法选中第三方组件内部的.vsa-item__trigger元素
2. 你编写的选择器存在语法错误：各属性选择器之间的空格属于后代选择器语法，你要选中的是同时携带对应属性的按钮本身，不能加空格；同时data-vsa-list、data-vsa-item这类属性的值是组件运行时动态生成的，写死固定值不具备通用性，可直接删除这些冗余规则。

修复方案 #

方案1：保留style scoped，使用深度选择器 #

• Vue2 + SCSS 写法：

::v-deep button.vsa-item__trigger[aria-expanded="false"] {
  border: none !important;
}

• Vue3 写法：

:deep(button.vsa-item__trigger[aria-expanded="false"]) {
  border: none !important;
}

方案2：写入全局样式 #

将样式规则放到项目全局无scoped属性的公共样式文件中，不需要深度选择器即可生效：

button.vsa-item__trigger[aria-expanded="false"] {
  border: none !important;
}

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