使用 Bulma 為 Vue 中的活動鏈接設置樣式

Question

以下按鈕用於在 VueJS 應用程序的頁面上導航：

<div class="box button title" @click="updateMenu()" :class="componentName == 'central' ? 'is-primary' : ''"><router-link to="/home/central">Central</router-link></div>
<div class="box button title" @click="updateMenu()" :class="componentName == 'validation' ? 'is-primary' : ''"><router-link to="/home/validation">Validation</router-link></div>
<div class="box button title" @click="updateMenu()" :class="componentName == 'list' ? 'is-primary' : ''"><router-link to="/home/production">List</router-link></div>

這是路由器設置的片段：

export default new VueRouter({
  routes,
  linkActiveClass: "active",      // active class for non-exact links
  linkExactActiveClass: "active"  // active class for exact links
});

Bulma 是本項目中使用的 CSS 框架，與鏈接 styles 相關的變量在名為 index.scss 的文件中設置如下：

$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
$link-active: $white;

這是使用此代碼的當前行為：

• 單擊按鈕時，按鈕的背景顏色更改為“is-primary”的顏色設置（這很好）
• 按鈕中的文本仍然是“主要”顏色（這很糟糕） - 預計會變為白色

為什么不是$link-active: $white; 將點擊鏈接的文本更改為白色？

作為測試，當它被添加到與導航按鈕相同的頁面時，活動按鈕的鏈接文本會變為白色：

<style scoped>
.active {
    color: white;
}
</style>

上述測試不適用於生產代碼 - 對此的修復應該在某處的 Bulma 變量設置中。 但在哪里/如何，是個問題。

Answer 1

這可能是 SASS/SCSS 范圍界定的東西。

參考 IVO： Vue.js 2：Scoped 樣式不適用於 sass/scss

是您的樣式中的 go /deep/或::v-deep 。