q-table title-class not working

CWoodman

I have a table like this:

<q-table
   class="non-selectable q-mx-sm q-mt-sm"
   dense
   square
   title="Default Units for new recipes:"
   title-class="table-title"
   :data="defaultMeasures"
   :columns="defaultColumns"
   hide-bottom
 >

and style like this:

<style lang="stylus" scoped>
.table-title
  background-color: $blue-grey-1
  color: $indigo-10
thead tr:first-child th
  background-color: $blue-grey-1
  color: $indigo-10
</style>

The thead class works fine, but the title class does not have any effect.
What am I doing wrong?

dobbel

@cwoodman

Did you try !important ?

CWoodman

Doesn’t help

beets

@cwoodman Does it work if you remove the scoped modifier on the style tag? You probably do want it to be scoped, but that’s what I would check first. Otherwise, check in inspect element and see if that rule is being applied, but overwritten by something else.

CWoodman

Yes, removing ‘scoped’ lets it show. But I need it to be scoped.
I have a global style in app.styl: .q-table__top, thead tr:first-child th
This overrides the scoped style. If I comment that out in app.styl, there doesn’t seem to be any style applied unless I remove scoped from the local one.
Is this title-class prop supposed to work?

beets

@cwoodman By default with scoped styles, you can’t target a child component’s internals. That’s intentional as the scoped style is meant to prevent styles from affected children. It sound then like you just need to use a deep selector, like this:

<q-table
   class="recipe-units-table non-selectable q-mx-sm q-mt-sm"
   dense
   square
   title="Default Units for new recipes:"
   title-class="table-title"
   :data="defaultMeasures"
   :columns="defaultColumns"
   hide-bottom
 >

<style lang="stylus" scoped>
.recipe-units-table >>> .table-title
  background-color: $blue-grey-1
  color: $indigo-10
.recipe-units-table >>> thead tr:first-child th
  background-color: $blue-grey-1
  color: $indigo-10
</style>

Notice the new class on the q-table, and the deep >>> selector : https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

CWoodman

@beets OK, that works! Now the style is showing.
But the background-color only affects the title text. How can I set the background of the containing box for the title?

beets

@cwoodman Try:

.recipe-units-table >>> .q-table__top
  background-color: $blue-grey-1

CWoodman

@beets OK that does the trick! Thanks a bunch!

CWoodman

Oh, one more thing…
How can I center the text? text-align doesn’t have any effect.

beets

@cwoodman This should work:

.recipe-units-table >>> .q-table__top
  background-color: $blue-grey-1
  justify-content: center

CWoodman

@beets Yes. You’re the best! Thanks again.

beets

@cwoodman No problem, glad to help!

No More Posting New Topics!

q-table title-class not working