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

## 何が起きているか

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

![スクリーンショット 2020-08-28 17.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/e0851bc3-851e-1608-026f-374861da5ebd.png)

### 環境

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

### 事前準備

以前書いたこの記事のソースを流用しています
[Buefy のインストール〜独自のスタイルを当てるまで](https://qiita.com/azuharu07/items/f5f134195e7569bfd4cb)

## 挙動をみてみる

chrome のデベロッパーツールで見てみます
こんなコンポーネントを作って App に表示させてみました
データは[ここ](https://buefy.org/documentation/table)から持って来ました

```vue: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>
```

![スクリーンショット 2020-08-28 17.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/df3ff1b6-3016-9f32-3c4e-50fcedf74e0f.png)
よく見てみると

```css
.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`がモバイル用のスタイルを当てている事がわかるのでオーバーライドします

```scss: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;
    }
}
```

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

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

![スクリーンショット 2020-08-29 0.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/338d476f-f4d1-c8cd-416d-0fb3c86f463b.png)

![スクリーンショット 2020-08-29 0.42.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/bdeda3c1-9931-de83-3775-43698fd60cbf.png)

## 終わりに

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

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

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

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