web-dev-qa-db-ja.com

vuetify v-data-tableのスタイル

V-data-tableの最後ではない子の各行の間に、デフォルトで行が出力されます。 CSSを変更してその行を変更したいと思います。それを除く。元々、開発者コンソールでは、border-bottomに関するCSSは次のようになっています。

.theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

データテーブルに追加のクラス「mytable」を割り当てました。

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1 mytable">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
</v-data-table>

そしてCSSで私はテーブルを変更しようとしています

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none;
}

Background-colorがlightgoldenrodyellowに変更されますが、border-bottomは引き続き印刷されます。開発者コンソールでは、border-bottomを削除するためのディレクティブが実行されます。背景色は違います。ボーダーボトムを変更するには、どのセレクターを使用する必要がありますか？テーマで使用されているものと同じCSSを使用しても、最初は機能しません。

cssvuetify.js
8
Kavau

ボーダーボトムを変更するには、どのセレクターを使用する必要がありますか？

カスタムクラスとvuetifyで使用されるクラスを使用する

.mytable .v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

さらに、ライトテーマを具体的にスタイルする場合は、.theme--lightを追加できます。

codepen

Vuetifyコンポーネントのスタイリングの詳細：

CSSがコンポーネント内で機能していない（影響を及ぼしている）
スタイリングVuetifyセレクター

5
Traxo

使っています VueJS 2.x。次の選択方法がうまくいきました。

<style lang="scss" scoped>
.table-header /deep/ {
  thead {
    background-color: black;
  }
}
</style>
3
Ravi Anand

あなたは！importantを使うことができます、それはあなたの問題を解決することができます。機能しない場合は、サーバーを再起動してください。

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none !important;
 }

お役に立てば幸いです。良い一日を過ごしてください！ :-)

0
Mickael Lherminez