Migration de Vuetify 2 vers 3 : remplacez les styles supprimés .v-application/rounded/flat
<p>J'essaie de passer de Vuetify/Vue 2 à 3. Je ne suis pas un développeur front-end, je suis juste responsable de la mise à niveau d'un ancien code pour le maintenir fonctionnel. Malheureusement, le guide de migration semble supposer certaines connaissances de base en CSS et ne fournit pas d'exemples sur la façon de réparer tout ce qui a été supprimé. </p>
<p>J'essaie de comprendre comment migrer <code>arrondi</code> et <code>flat</code> dans l'extrait de code suivant : </p>
<pre class="brush:php;toolbar:false;"><v-select
class="mr-2 filtre-entrée-personnalisée"
slot = "prepend-inner"
v-model="champ"
:items="champs"
menu-props="auto"
label="Champ"
cacher les détails
une seule ligne
densité = "compact"
arrondi
plat
theme="sombre"
/></pré>
<p>et <code>.v-application</code> (si nécessaire) dans cet extrait de code : </p>
<pre class="brush:php;toolbar:false;"><style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:premier-enfant,
.v-application--is-ltr .mr {
marge droite : 10 px ;
}
</style></pre>
<p>Malheureusement, la seule suggestion à ce sujet dans le guide de migration est : </p>
<ul>
L'attribut <li><code>rounded</code> a été supprimé. Veuillez appliquer la classe CSS aux coins arrondis à l'élément de contenu du menu. Par exemple : <code>.rounded-te</code></li>
<li>Les styles globaux précédemment inclus sous les noms <code>.v-application p</code> ou <code>.v-application ul</code> ne sont plus inclus. Si vous devez ajouter une marge à <code>p</code>, ou ajouter un remplissage gauche à <code>ul</code> et <code>ol</code>, ajoutez-le dans la configuration manuelle du composant racine. dans la balise <code><style></code> ≪/li>
</ul>
<p>Les conseils ci-dessus sur <code>arrondi</code> remplacent simplement <code>arrondi</code> par <code>.rounded-te</code> mentionné dans un autre type de contrôle). </p>
<p>Il indique que flat a été supprimé de certains autres contrôles et remplacé par "l'attribut de variante unique", mais en essayant de remplacer <code>flat< /code> me donne une erreur de syntaxe.</p>
<p>Merci ! </p>
<p>(J'ai initialement posé cette question ici et quelqu'un m'a suggéré de la diviser en plusieurs questions)</p>
