Vuetify JS - Apply CSS to a specific component

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>>

Raeisi · Accepted Answer · 2020-10-31 21:47:43Z

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>

answered Oct 31, 2020 at 21:47

Raeisi

2,2311 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lara Over a year ago

Okay, but if it's meant for the second child or the 100th child?

Raeisi Over a year ago

:first-child === just the first child :nth-child(n) for nth child

Gabriel G. · Accepted Answer · 2020-10-31 21:50:58Z

1

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
}

answered Oct 31, 2020 at 21:50

Gabriel G.

113 bronze badges

6 Comments

Lara Over a year ago

I tried that, but how does that work with the styles I mentioned above?

Gabriel G. Over a year ago

Can't you simply replace .v-text-field with #my-text-field? Or does that not work?

Gabriel G. Over a year ago

Also note that if you want to use Raeisi's solution for any nth child. There happens to be a nth child selector

Gabriel G. Over a year ago

If you are trying to change the text color of the text that the user writes in v-text-field, just put it in the first-level css. You don't need to use deep selectors >>>

Lara Over a year ago

Thanks. The n-th child solution does work, although I don't like it because you have to adjust the n when adding components above your text field.

|

Collectives™ on Stack Overflow

Vuetify JS - Apply CSS to a specific component

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related