Quasar Expansion Item : How to give a different colour the submenu which is selected?

Question

is it possible to have a highlight colour for the selected item of an Expansion Item ?

          <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>

Answer 1

Yes, you can. Since quasar provides styled wrappers over HTML DOM elements, custom CSS can be applied to the class which can be found out by inspecting in chrome dev tools. In your case, the class name is: .q-expansion-item--expanded

Add this to component CSS:

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

This will add these properties when the item is expanded. There are a few other ways to solve this as well using JS.