Vue Accordion：覆盖 SCSS 值答案

【问题标题】：Vue Accordion: Override SCSS valueVue Accordion：覆盖 SCSS 值
【发布时间】：2021-08-24 19:07:39
【问题描述】：

我在我的 vue 项目中使用这个手风琴：https://github.com/tkhquang/vue-simple-accordion#html-structure

我无法覆盖按钮上的样式。类名是“vsa-item__trigger”，但我想不出一种将我的风格附加到它的方法。 scss 在我的组件中的样式标记中。这就是我的代码现在的样子：

            <vsa-list>
              <vsa-item  v-for="item in listOfItems" :key="item.id">
                <vsa-heading>
                  <label for="acc1 acc-label">  {{ item.heading }} </label>
                </vsa-heading>
                <vsa-content>
                  <ul class="mobile-ul-accordian">
                    <li class="mobile-li-accordian">
                      <a :href="item.url">{{ item.content }}</a>
                    </li>
                  </ul>               
              </vsa-content>
              </vsa-item>
            </vsa-list>

button.vsa-item__trigger[type="button"][aria-expanded="false"] [data-vsa-list="14"] [data-vsa-item="15"] [data-vsa-active="false"] [aria-controls="vsa-panel-15"]{
  border: none !important;
}

【问题讨论】：

尝试删除开头的button.。
请告诉我们您是如何将您的样式添加到组件中的。
@michellesokolov 如果我的回答对您有帮助，请告诉我。

标签： vue.js sass accordion

【解决方案1】：

我刚刚简化了您的选择器，这对我有用。也在JSFiddle。

<button
        class="vsa-item__trigger"
        type="button"
        aria-expanded="true"
        aria-controls="vsa-panel-{item_id}"
        {data_attrs}
      >
        <span
          class="vsa-item__trigger__content"
          {data_attrs}
        >
          This is the heading
        </span>
        <span
          class="vsa-item__trigger__icon vsa-item__trigger__icon--is-active"
          {data_attrs}
        >
        </span>
      </button>

button.vsa-item__trigger {
  border: none !important;
}

【讨论】：