Réinitialisation et superposition du style de Naive-ui, j'ai commencé à utiliser v-deep dans css pour réinitialiser comme d'autres frameworks d'interface utilisateur, et j'ai constaté que cela ne fonctionnait pas.Après avoir lu le site officiel, j'ai trouvé le n-config-provider fourni pour définir le style par moi-même
Réinitialisation du style naïf-ui
Le site officiel explique que
vous pouvez définir vous-même le style via le fournisseur n-config fourni, et cela ne fonctionne pas si je le modifie en css via v-deep. Trouvez les composants utilisés dans le bouton d'édition (une icône) dans le coin inférieur droit fourni par le site officiel, entrez les paramètres requis, exportez-le et collez-le dans votre fichier.
<ClientOnly>
<n-config-provider :theme-overrides="themeOverrides">
<n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="110"
require-mark-placement="right-hanging" size="medium" :style="{
maxWidth: '640px'
}">
<n-form-item label="label：" path="inputValue">
<n-input v-model:value="model.inputValue" placeholder="Input" />
</n-form-item>
</n-form>
</n-config-provider>
</ClientOnly>
<script setup lang="ts">
import {
NConfigProvider, NForm, NFormItem, NInput} from 'naive-ui';
// 主要就是这一块
const themeOverrides = {
common: {
primaryColor: '#ff0000',
primaryColorHover: "#ff0000"
},
Form: {
feedbackPadding: "0px 0 0 2px",
feedbackHeightMedium: "14px",
feedbackFontSizeMedium: "12px"
}
}
</script>