QTab: How To Override The staticClass .no-wrap?

[o'kennedy]

There is a class added .no-wrap that returns the css: flex-wrap: no-wrap; by the components renderer. I’m trying to override this with a flex-wrap: wrap.

I’ve tried using v-bing:class and :style.

as one example:

<script>
export default {
  data () {
    styleObject: {
        flexWrap: 'wrap !important',
      }
  }
}
</script>

<template>
  <the-component :style="styleObject" </the-component>
</template>

Using the above example, Chrome’s inspector shows that the component is inlined with style="flex-wrap: wrap !important;" and the .no-wrap class is overridden (crossed-out) but that is not what is rendered - its still wrapping.

Is there and how can I override the render staticClass that the component injects??

I looked at the code avail here but I don’t know how to override it.

There’s a CodePen here. However, I cannot get the viewport to work correctly.

The concept is that the component wrapps on smaller screen widths and I’m wanting to override this like:

@media (max-width: 599px) {
  .no-wrap {
    flex-wrap: wrap !important;
  }
}

[friesen]

<style scoped lang="scss">

.q-tab {
  &::v-deep {
    .q-tab__content {
      flex-wrap: wrap !important;
    }
  }
}

.q-tabs {
  &::v-deep {
    .q-tabs__content {
      flex-wrap: wrap !important;
    }
  }
}

</style>