【Buefy】b-tableのbackgroundスタイルのバグを見つけたので修正してみた

何が起きているか

Buefy の b-table タグはスマホで表示するとおされな表示になります
ただ、画面全体で背景色を設定している時、レコードの間の margin-bottom の部分が背景色を上書きして白くなってしまいます・・・

環境

パッケージ	バージョン
Buefy	0.9.1
Vue.js	2.6.11

事前準備

以前書いたこの記事のソースを流用しています
Buefy のインストール〜独自のスタイルを当てるまで

挙動をみてみる

chrome のデベロッパーツールで見てみます
こんなコンポーネントを作って App に表示させてみました
データはここから持って来ました

src/components/TableSample.vue

<template>
    <div class="table-sample">
        <b-table :data="data" :columns="columns"></b-table>
    </div>
</template>

<script>
export default {
    name: "TableSample",
    props: {
        msg: String,
    },
    data() {
        return {
            data: [
                { id: 1, first_name: "Jesse", last_name: "Simmons", date: "2016-10-15 13:43:27", gender: "Male" },
                { id: 2, first_name: "John", last_name: "Jacobs", date: "2016-12-15 06:00:53", gender: "Male" },
                { id: 3, first_name: "Tina", last_name: "Gilbert", date: "2016-04-26 06:26:28", gender: "Female" },
                { id: 4, first_name: "Clarence", last_name: "Flores", date: "2016-04-10 10:28:46", gender: "Male" },
                { id: 5, first_name: "Anne", last_name: "Lee", date: "2016-12-06 14:38:38", gender: "Female" },
            ],
            columns: [
                {
                    field: "id",
                    label: "ID",
                    width: "40",
                    numeric: true,
                },
                {
                    field: "first_name",
                    label: "First Name",
                },
                {
                    field: "last_name",
                    label: "Last Name",
                },
                {
                    field: "date",
                    label: "Date",
                    centered: true,
                },
                {
                    field: "gender",
                    label: "Gender",
                },
            ],
        };
    },
};
</script>

<style scoped lang="scss">
.table-sample {
    padding: 1em;
}
</style>

よく見てみると

.table {
    background-color: white;
    color: #363636;
}

ここで背景色を設定されているのがわかります
レコードの色を白くするためにこうなっているのでしょうか・・・

とりあえずどうにかしてみる

b-table のスタイルはnode_modules/bulma/sass/elements/table.sassに書かれています

src/assets/styles/_table.scssを作成し、table.sass をインポートします

デベロッパーツールにて.table-wrapper.has-mobile-cardsがモバイル用のスタイルを当てている事がわかるのでオーバーライドします

src/assets/styles/_table.scss

@import "~bulma/sass/elements/table.sass";

.table-wrapper .has-mobile-cards {
    .table {
        background-color: transparent;
    }
    tr {
        background: $table-background-color !important;
    }
}

これで無事に背景色が表示されました！

デベロッパーツールで確認すると正しくスタイルが当たっている事がわかります

終わりに

最初は自作コンポーネントの<style>で無理やりスタイルを当てていました
でもそれにはscopedを外す必要があり、別のコンポーネントに影響を及ぼす可能性があります
Buefy のコンポーネントに自分のスタイルを当てたい場合は

1. デベロッパーツールでクラスを確認
2. node_modules/bulma/sass/の下のどのファイルにクラスが存在するかを確認する
3. sass ファイルを作成し、@importで ↑ をインポートする
4. スタイルをオーバーライドする

以上の手順で変更しましょう
ただもちろん、同パッケージ内で同じコンポーネントを使う全ての部分で適用されますので注意が必要です

今回のソースは github に上げていますのでご活用ください
https://github.com/azuharu07/vue-buefy-sample/commit/488c1e34e4bcdba0788d4002092f942050f35155