CODEWITHSUNDEEP
bulmabuefy
knot22
knot22

Reputation: 2768

override table background color in Buefy/Bulma

In an app that uses the Buefy component library (which uses the Bulma framework for the CSS), I've got the background color for table components set like so in the variables.scss file:

$contrast: #edebe4;

$table-background-color: $contrast;

This causes all table components to be displayed with the defined background color. Now, I'd like to be able to override that color on a specific table component. I haven't found anything in the Buefy or Bulma docs that show how to do this. Is it possible?

I tried this but it didn't have any affect -

<b-table
    :data="data"
    :sticky-header="true"
    class="has-background-white"
>

Upvotes: 0

Views: 1085

Answers (1)

Ho&#224;ng Trần
Ho&#224;ng Trần

Reputation: 600

I met this case before and here is my solution:

  • First, I wrap b-table in a section and assign an id for section tag
<section id="my-table">
    <b-table>
    ....
    </b-table>
</section>
  • Then, in my style, I override the background color of table class:
<style scoped>
#my-table .table{
  background-color: white;
}
</style>

Upvotes: 0

Related Questions