У компонента vuetify v-icon можно как то сделать фон и назначить его цвет?

Question

[Иван]

Здравствуйте. Есть компонент <v-text-field></v-text-field>, в него через слот воткнуто <v-icon></v-icon> с надписью Email.

<v-text-field some_propses>
  <template v-slot:append>
    <v-icon>Email</v-icon>
  </template>
</v-text-field>

Так вот, можно как то сделать цветом фон где эта надпись емейл? Если да то как. Пропс color меняет цвет букв, а надо еще как то фон

Answer 1

[Aetae]

Мужик, ты про css слышал?

Comments

[Иван]

Слышал, но c background-color получается не то что надо. Заливает только буквы, а до конца этой рамки нет.

[Aetae]

Иван, ну значит, если энтот самый append слот не предусмтривает такого - воружайся инспектором и смотри как стили взаимодействуют. Добавь ещё padding какой-нить, минусовой margin, или там :after. Или добавь допстили для внутреннего класса этого компонента...

Answer 2

[artloveyou]

Если так надо


то можно так попробовать

<template>

  <v-text-field some_propses>
    <template v-slot:append>
      <v-icon>Email</v-icon>
    </template>
  </v-text-field>

</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style>
.v-text-field > .v-input__control > .v-input__slot {
  background-color: green;
}
</style>