将CSS添加到Vuetify v-data-table

Question

我想向我的 v-data-table 标题和单元格行添加/修改 CSS，我搜索了官方文档并在 google 上搜索，但没有一个解决方案有效。 根据不同的解决方案，我尝试为标题添加 CSS 类和模板，但它们似乎都不适合我。 我是第一次使用 Vue :)

这是我的代码：

<v-data-table
  :headers="headers"
  :search="search"
  :items="PendingApprovals"
      multi-sort
      v-model="selected"
    show-select
    item-key="id"    
    show-expand
    hide-default-footer="true"
    disable-pagination = "true"
    class="elevation-1 mytable">

    <template v-slot:[`item.DateSubmitted`]="{ item }">
      {{FormatDate(item.raw.DateSubmitted)}}
    </template>
    <template v-slot:[`item.Download`]="{ item }">    
      <a :href="DownloadUrl +item.raw.id">
      <v-icon size="small" class="me-2">
        mdi-download
      </v-icon>
    </a>
    </template>
    <template v-slot:[`item.Edit`]="{ item }">               
        <a :href="/form/+item.raw.id">
        <v-icon size="small" class="me-2">
        mdi-pencil
      </v-icon>
      </a>
  
    </template>

  </v-data-table>


export default {
    components: {
      VDataTable, 
  },
    data () {
      return {
        dialog: false,
      DownloadUrl : process.env.VUE_APP_API_BASE_URL + "JournalEx/Example/",      
      PendingApprovals:[],
      selected: [],
      ApproveDenyValues: [],
      search:'',

      rules: {
      required: (value) => !!value || "Denial Reason is a required field"
      },

      snackbar: false,
      snackbartext: '',
      timeout: 3000,

      headers: [
        {
          key: 'JournalTest',
          title: 'ID',
          align: 'start',
        },
        { title: 'IPS CASE', key: 'CaseCode', width: '20%' },
        { title: 'REQUEST REASON', key: 'Reason',  width: '30%'},
        { title: 'REQUESTED BY', key: 'RequestedBy' ,  width: '15%'},
        { title: 'DATE SUBMITTED', key: 'DateSubmitted'},
        { title: 'DOWNLOAD', key: 'Download',sortable:false},
        { title: 'EDIT', key: 'Edit', sortable: false },

      ], 
      }
    }
}

以下是我尝试过但不适合我的一些 CSS。不知道为什么：

<style scoped>
.v-data-table >>> .v-data-table-header {
  background-color: red !important;
}

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}
</style>

Answer 1

我已经使用以下 CSS 代码解决了该问题：

.v-data-table .v-table__wrapper > table > thead > tr > td,
    .v-data-table .v-table__wrapper > table > thead > tr th,
    .v-data-table .v-table__wrapper > table tbody > tr > td,
    .v-data-table .v-table__wrapper > table tbody > tr th {
      background-color: #f9f5e3 !important;
    }
    
    
    .v-data-table .v-table__wrapper > table > thead > tr > th,
    .v-data-table .v-table__wrapper > table tbody > tr > th {
      background-color: #D14081 !important;
    }
    
    
    .v-data-table-header__content {
      background-color: #D14081 !important;
      color: #CCF5AC;
      font-weight: bold;
    }


    .v-data-table .v-table__wrapper > table tbody > tr:nth-of-type(even) > td,
    .v-data-table .v-table__wrapper > table tbody > tr:nth-of-type(even) th {
      background-color: #e4e0d0 !important;
    }