Vuetify JS - 将 CSS 应用于特定组件

Question

Let's say I have a Test.vue with 2 v-text-field components.

I want to apply my CSS only to the first text field.

Test.vue

<template>
  <div class="test">
    <v-text-field></v-text-field>
    <v-text-field></v-text-field>
  </div>
</template>

<script>
export default {};
</script>


<style scoped>
.v-text-field {
  width: 100px;
}

.v-text-field >>> input {
  font-size: 2em;
  color: #fff;
}

.v-text-field--outlined >>> fieldset {
  color: #000000 !important;
}
</style>>

 

Answer 1

How about to use the first-child CSS selector

<style scoped>
.test:first-child {
  width: 100px;
}

.test:first-child >>> input {
  font-size: 2em;
  color: #fff;
}

.test:first-child .v-text-field--outlined >>> fieldset {
  color: #000000 !important;
}
</style>

Answer 2

There are a lot of ways to do this, but I think it would be best to simply give your specific text field an id and reference that.

<div class="test">
    <v-text-field id="my-text-field"></v-text-field>
    <v-text-field></v-text-field>
</div>

#my-text-field {
    //your styling
}