Nuxt3+Naive-ui组件样式修改

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>

猜你喜欢

转载自blog.csdn.net/qq_38661597/article/details/131188537