naive-ui的样式重置,覆盖,我开始像使用其他ui框架一下在css里使用v-deep来重置,发现不起作用,阅读官网后发现提供的n-config-provider来自己设置样式
naive-ui样式的重置
官网讲解
通过提供的n-config-provider来自己设置样式, 我通过v-deep在css里修改不起作用。在官网提供的右下角的编辑按钮(一个图标)里找到使用的组件,在里面输入需要的设置后可以导出,粘贴到你的文件里就行。
<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>