征服 Naive UI：解决 .n-dropdown-menu 样式修改难题

在使用 Vue.js 和 Naive UI 构建 Web 应用时，经常会遇到需要自定义组件样式的情况。 然而，由于 Naive UI 自身的设计特点，直接修改某些组件的样式并不容易。 本文将聚焦于 .n-dropdown-menu 样式修改这个常见问题，深入剖析问题根源，并提供解决方案，助力开发者突破样式定制的瓶颈，实现高度定制化的用户界面。

问题背景：scoped CSS 的局限与动态渲染

在实际开发中，我们常常需要修改 Naive UI 组件的默认样式，以满足特定的设计需求。 其中，修改 .n-dropdown-menu（下拉菜单）的样式就是一个典型的难题。

问题主要源于以下两点：

• scoped CSS 的作用域限制：  在 Vue 组件中使用 <style scoped> 属性可以实现 CSS 样式的局部化，避免样式冲突。 然而，scoped CSS 也会限制样式的穿透性，导致无法直接修改子组件或渲染到组件外部的元素的样式。
• 动态渲染与 DOM 结构：  Naive UI 的下拉菜单组件 (NMenu) 通常是动态生成的，并且 .n-dropdown-menu 元素可能被渲染到组件之外的 DOM 节点 (例如 body 元素)。 这使得 scoped CSS 无法作用于 .n-dropdown-menu 元素。

解决方案

针对以上问题， 我们提供以下解决方案， 从推荐到备选， 帮助你逐一排查， 找到最适合你的方案。

1. CSS 穿透和属性配置结合（推荐）

父组件示例 (Vue 3)：

<template>
  <n-layout class="layout" has-sider>
    <n-layout-sider
      v-if="showNavBar"
      class="layout-sider"
      content-style="padding: 0;"
      :width="leftMenuWidth"
      :native-scrollbar="false"
      :inverted="leftInverted"
    >
      <Menu
        v-model:collapsed="designStore.collapsed.is"
        :inverted="leftInverted"
      />
    </n-layout-sider>
  </n-layout>
</template>
<style lang="scss" scoped>
.layout {
  height: 100%;
  **使用样式穿透修改子菜单样式**
  :deep(.n-dropdown-menu) {
    max-height: 600px !important;
    overflow: hidden;
  }
}
</style>

子组件示例 (Vue 3)：

<template>
  <NMenu
    ref="menuRef"
    :options="menus"
    :collapsed-width="64"
    :collapsed-icon-size="20"
    :indent="28"
    :dropdown-props="{
    **至关重要的属性 使其动态生成的dropdown子菜单插入到.layout类dom结构中
    该属性默认值为‘body’,若插入到了body中则无法将修改后的样式只作用到当前menu，会影响全局**
      to: '.layout', 
      scrollable: true
    }"
    :expanded-keys="openKeys"
  />
</template>

2. 全局 CSS 覆盖 (不推荐)

这是最简单粗暴的方法，但也是最不推荐的。 直接移除 <style> 标签上的 scoped 属性， 将 CSS 规则应用到全局。 这种方法会导致样式污染， 可能会影响到其他组件。

总结

1. 了解组件结构：  在修改样式之前， 使用开发者工具仔细检查组件的 DOM 结构， 了解各个元素的类名和层级关系。
2. 避免过度定制：  不要试图修改组件的底层样式， 尽量使用组件提供的 API 或 CSS 变量进行定制。
3. 保持样式的简洁和可维护性：  避免使用过于复杂的 CSS 选择器， 尽量保持样式的简洁和易于维护。