Vuetify에서 v-list의 배경색과 크기를 어떻게 스타일링합니까?

Vuetify에서 v-list의 배경색과 크기를 어떻게 스타일링합니까?

저는 Vuetify에 처음 와서 이런 걸 만들고 싶어요.기본적으로 네비게이션 드로어가 사이드바에 있는데, 선택 시 호버에 있는 리스트의 배경색도 변경할 수 있도록 하고 싶습니다.Vuetify 문서에서는 이에 대해 논의하지 않는 것 같습니다.모든 곳을 찾아봤는데 어떤 도움이라도 주시면 고맙겠습니다

스타일링할 비트인 "v-list-tile"을 클래스에 할당하고 css를 포함할 수 있습니다.v-navigation-drawer html은 다음과 같습니다.

<v-navigation-drawer
      dark
      permanent
    >
      <v-list>
        <v-list-tile
          class="tile"
          v-for="item in items"
          :key="item.title"
          @click=""
        > 
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action> //etc....

보시는 바와 같이,class="tile""v-list-filename"으로 이동합니다.

이제 .tile 클래스를 페이지에 추가합니다.css :

<style scoped>
  .tile {
    margin: 5px;
    border-radius: 4px;
  }
  .tile:hover {
    background: green;
  }
  .tile:active {
    background: yellow;
  }
</style>

그걸로 충분할 거야

언급URL : https://stackoverflow.com/questions/54175118/how-to-style-the-background-color-and-size-of-a-v-list-in-vuetify