Quasar 扩展项：如何为选择的子菜单赋予不同的颜色？

【问题标题】：Quasar Expansion Item : How to give a different colour the submenu which is selected?Quasar 扩展项：如何为选择的子菜单赋予不同的颜色？
【发布时间】：2021-06-03 23:37:42
【问题描述】：

是否可以为扩展项目的选定项目设置突出显示颜色？

          <q-expansion-item
            expand-separator
            v-for="(menu, index) in menus"
            :style="index === 0 && 'margin-top: 20px'"
            :icon="menu.icon"
            :label="menu.title"
            :key="menu.id"
            :expand-icon="menu.subMenus.length === 0 && 'none'"
          >
            <q-expansion-item
              v-for="(sub, index) in menu.subMenus"
              :label="sub"
              expand-icon="none"
              class="sub-content"
            />
          </q-expansion-item>

【问题讨论】：

标签： vue.js quasar

【解决方案1】：

是的，你可以。由于 quasar 在 HTML DOM 元素上提供了样式化的包装器，因此可以将自定义 CSS 应用到可以通过在 chrome 开发工具中检查来发现的类。在你的情况下，类名是：.q-expansion-item--expanded

将此添加到组件 CSS：

.q-expansion-item--expanded {
    border:1px solid #000000;
    border-color: cyan;
    background-color: cyan;
}

这将在项目展开时添加这些属性。还有其他一些方法可以使用 JS 来解决这个问题。

【讨论】：