[Solved] style selected route-tab diferently from the rest

[lazaroofarrill]

I wan’t to give the selected tab a bolder font weight, Since there is an active-color and active-bg-color property, I guess there’s gotta be a way of achieving this as well. Thanks in advance.

[Ilia]

@lazaroofarrill try this one

.q-tab--active .q-tab__label {
  color: red;
  font-weight: 300;
}

[lazaroofarrill]

@Ilia nope, didn’t work. I’m using a router-tab, don’t know if that makes any difference.

<template>
...
<q-tabs active-color="primary" align="left" class="custom-tab" dense>
        <q-route-tab :key="tab.label" :to="tab.to"
                     v-for="tab in headerRoutes" class="q-tab__label">
          {{tab.label}}
        </q-route-tab>
</q-tabs>
...
</template>
<style lang="scss" scoped>
.custom-tab {
    font-size: 12pt;
  }

  .q-tab__active .q-tab__label {
    font-weight: 900;
  }
</style>

[metalsadman]

@lazaroofarrill try it with deep selector /deep/, >>> or ::v-deep since you are using scoped.

[lazaroofarrill]

@Ilia & @metalsadman thanks a lot didn’t know that about the scoped property