Comme vous pouvez le voir dans la documentation officielle de vuetify, les étiquettes des commutateurs ont leur propre couleur prédéfinie. Comment puis-je les remplacer pour obtenir du texte noir? Je passe le commutateur en tant que accessoire d'un composant global appelé structure de formulaire à un autre composant que j'ai nommé "Primary"
https://vuetifyjs.com/en/components/selection-controls
<v-switch v-if="externalSwitch" model="switch2":label="externalSwitchLabel">
</v-switch>
<v-layout v-for="info in information" :key="info.title">
<v-flex>
<form-structure :externalSwitchLabel="`${info.title}`"
:externalSwitch="true" :hasSubTitle="true" :subTitle="`${info.status}`"
:script="`${info.script}`"></form-structure>
</v-flex>
</v-layout>
My array looks like this:
information : [
{title:"Something1, status:"active",script:"Hello"},
{title:"Something2", status:"in Progress" , script:"Ciao" }
]
My Css looks like this:
<style scoped>
.v-label.theme--light{
color: black
}
</style>
5 Réponses :
Vous pouvez utiliser l'accessoire color en lui donnant la valeur rgb ou hexadécimal comme suit:
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<v-container fluid px-0>
<v-switch
:label="`Switch 1: ${switch1.toString()}`"
v-model="switch1"
color="#f45525"
></v-switch>
<v-switch
:label="`Switch 2: ${switch2.toString()}`"
v-model="switch2"
color="rgb(0,150,45)"
></v-switch>
</v-container>
</v-app>
</div>
.v-input__slot .v-label{
color: black!important
}
new Vue({
el: '#app',
data () {
return {
switch1: true,
switch2: true
}
}
})
Merci pour l'aide, mais passer la couleur comme accessoire ne fonctionne pas non plus.
oh je vois, je voulais dire la couleur du texte lui-même donc dans ce cas ce serait "couleur du commutateur 1: vrai au noir" et non du commutateur lui-même.
désolé je t'ai mal compris, mais je cherche un moyen de résoudre ce problème
essayez la règle css que j'ai ajoutée dans ma réponse
Désolé mon frère mais ça n'aide pas non plus.
Essayez ceci.
.v-input--is-label-active label {
color: red !important;
}
J'ai essayé l'approche des emplacements et cela a fonctionné pour moi:
.input__label {
color: black;
}
CSS ressemble à ceci:
<v-switch>
<template v-slot:label>
<span class="input__label">Label text</span>
</template>
</v-switch>
Si vous ne souhaitez pas remplacer le style par défaut pour l'étiquette, vous pouvez passer un emplacement à v-switch avec l'élément de style souhaité.
Exemple:
.v-label-white {
color: white;
font-weight: bolder
}
Puis votre style:
<v-switch v-model="enableScreenshot" label="Enable Screenshot">
<template v-slot:label>
<span class="v-label-white">Enable Screenshot</span>
</template>
</v-switch>
Il vous suffit de supprimer scoped du style:
<style>
.v-label.theme--light{
color: black
}
</style>
Cela signifie que le style sera appliqué globalement dans l'application.
p >
Bonjour à nouveau, veuillez fournir un code essayé
Bonjour, je viens de mettre à jour la question et d'ajouter plus de détails.
Avez-vous essayé ce qui suit?
.v-label.theme - light {couleur: noir! important; }ouais je l'ai essayé, ça n'a pas fonctionné. Cela ne fonctionne que si je retire la portée de mon style, mais cela change toutes les étiquettes sur toutes les autres pages et sur chaque champ de texte également.
Consultez cette réponse pour comprendre pourquoi votre css ne fonctionne pas stackoverflow.com/a/50985784/1981247