Vuetify의 확장 가능한 데이터 테이블에서 상자 그림자 제거

Vuetify의 확장 가능한 데이터 테이블에서 상자 그림자 제거

Vuetify의 확장 가능한 데이터 테이블에서 박스 섀도우를 제거할 수 없을 것 같습니다.인라인 css 를 사용하여box-shadow: none그리고 심지어

<style scope>
.v-data-table__expanded .v-data-table__expanded__content {
  box-shadow: none;
}

저도 한번 써봤어요.elevation="0"데이터 테이블에서 작동하기를 바라지만 여전히 작동하지 않습니다.누가 나를 도와줄 수 있나요?

현재 상황은 다음과 같습니다.

방금 vuetify에서 코드를 사용했는데, 편의상 다음과 같은 코드를 사용합니다.

    <div class="my-6">
      <v-text-field
        v-model="search"
        label="Search"
        class="mx-4"
        prepend-inner-icon="mdi-magnify"
        outlined
        dense
        hide-details
      ></v-text-field>
    </div>
    <template>
      <v-data-table
        :headers="dessertHeaders"
        :items="desserts"
        :single-expand="true"
        :expanded.sync="expanded"
        item-key="name"
        dense
        show-expand
        :search="search"
        :custom-filter="filter"
        elevation="0"
      >
        <template v-slot:expanded-item="{ headers, item }" elevation="0">
          <td :colspan="headers.length" elevation="0">More info about {{ item.name }}</td>
        </template>
      </v-data-table>
    </template>

다음 CSS를 사용합니다.

.v-data-table__expanded.v-data-table__expanded__content {
  box-shadow: none !important;
}

클래스는 같은 요소에 있기 때문에 부모/(대)자녀 관계를 나타내는 공백이 필요 없습니다.

여기 또 다른 옵션이 있습니다.!important수식자:

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}

댄이 상기 해결책에 문제가 있는 사람을 위해.이것은 그가 코멘트란에 말한 것처럼 나에게 효과가 있었다.자세한 내용은 그의 의견을 참조하거나 이 링크를 참조하십시오.

.v-data-table >>> .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}

언급URL : https://stackoverflow.com/questions/65699775/remove-box-shadow-from-expandable-data-table-in-vuetify