背景描述

最近需要做一个数据应用的平台，在搭建前端界面的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。本人试了好几种例如：行内样式、直接起新的类名，写样式、给important、写v-deep、通过[class*='n-menu']等方式，均未生效。
同时和Naive UI相关的博客比较少,看了的也不太好用，导致只能自己去官方文档一步步摸索，皇天不负有心人，找到了最后的解决办法。

官网地址

www.naiveui.com/zh-CN/os-th…

解决方法

因为本人刚用到Menu组件，就遇到了这个样式需要修改的问题，所以就以Menu组件作为例子，进行示范

原本样式

下图为组件刚引入界面，未经任何样式修改的样子。

比如我想要修改的位置为NMenu中的字体和图标的颜色、包括菜单当前的选中值的颜色，首先需要在当前组件所在文件内引入MenuProps

import { NMenu, MenuProps } from 'naive-ui';
type MenuThemeOverrides = NonNullable<MenuProps['themeOverrides']>

这个时候就可以ctrl+右键MenuProps，查看相关MenuProps的属性屏幕截图 2024-05-21 161229.png

这时候会跳转至一个名字为Menu.d.ts的文件，文件内容如下图所示：

屏幕截图 2024-05-21 161609.png

在Menu.d.ts文件中的MenuProps对象中找到themeOverrides或者theme对象，这两个对象中的属性应该是一致的，看了一下大体一致，没具体对比。如下图所示：

themeOverrides对象中所有的属性都是跟Menu组件相关且可配置更改的样式属性。我们需要修改的是文字的菜单本身、活动元素和鼠标经过元素的颜色。因此选在themeOverrides对象中查看对应的属性名称，并在当前组件所在文件创建以下内容：

  const menuThemeOverrides: MenuThemeOverrides = {
      itemTextColor: '#ffffff',
      itemTextColorHoverHorizontal: 'red',
      itemTextColorActiveHorizontal: '#000000',
      itemTextColorActiveHoverHorizontal: '#000000',
      itemIconColor: '#fff',
      itemIconColorHoverHorizontal: 'red',
      itemIconColorActiveHorizontal: '#000000',
      itemIconColorActiveHoverHorizontal: '#000000'
    };

然后在组件上设置一个属性，如下图所示：

屏幕截图 2024-05-21 164846.png
为避免给大家造成误解,这里需要注意的两点:
1.在Menu.d.ts文件中查看的属性中带了Inverted后缀的，在这里更改样式时都不需要在写

例如:
 itemColorHoverInverted =====> itemColorHover

2.我这里使用带Horizontal的属性是因为我在使用组件时，在组件上使用了该属性

屏幕截图 2024-05-21 165120.png

有了以上步骤，我们的组件样式就修改成功了，给大家看看效果图吧，红色为鼠标经过、黑色为选中：

接下来就给大家上一个完整版的代码吧

import {
  defineComponent,
  PropType,
  ref,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NMenu, MenuProps } from 'naive-ui';
type MenuThemeOverrides = NonNullable<MenuProps['themeOverrides']>;

const Header = defineComponent({
  name: 'Header',
  props: {
    headerMenuOptions: {
      type: Array as PropType<any>,
      default: []
    }
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();
    const navMenuRef = ref();
    const menuKey = ref(route.meta.activeMenu as string);
    const menuThemeOverrides: MenuThemeOverrides = {
      itemTextColor: '#ffffff',
      itemTextColorHoverHorizontal: 'red',
      itemTextColorActiveHorizontal: '#000000',
      itemTextColorActiveHoverHorizontal: '#000000',
      itemIconColor: '#fff',
      itemIconColorHoverHorizontal: 'red',
      itemIconColorActiveHorizontal: '#000000',
      itemIconColorActiveHoverHorizontal: '#000000'
    };
    // 导航点击
    const handleMenuClick = (key: string) => {
      router.push({ path: `/${key}` });
    };
    return { menuThemeOverrides, navMenuRef, handleMenuClick, menuKey };
  },
  render() {
    return (
      <div>
        {/* 头部菜单 */}
        <NMenu
          v-model:value={this.menuKey}
          mode="horizontal"
          options={this.headerMenuOptions}
          responsive
          theme-overrides={this.menuThemeOverrides}
          onUpdateValue={this.handleMenuClick}
        />
      </div>
    );
  }
});

export default Header;

这个供大家单独修改某一界面中单独组件的样式，要是整个风格都需要变得话，可以参考官方的全局主题调整主题，欢迎交流。不对的地方多多指教，谢谢

Naive UI修改组件默认样式

背景描述

官网地址

解决方法

原本样式