如何减少 Fabric UI 中 link 组之间的间距

Question

如何更改导航元素中两个导航组之间的间距。我有以下元素：

  <Nav
    groups={[
      {
        links: [
          {
            key: "profile",
            name: "View Profile",
            url: "/account"
          },
          {
            key: "manageCompanies",
            name: "Manage Companies",
            url: "/manageCompanies"
          }
        ]
      },
      {
        name: "Sale",
        links: [
          {
            key: "Invoice",
            name: "Invoice",
            url: "/invoice"
          },
          {
            key: "Quotation",
            name: "Quotation",
            url: "/quotation"
          },
          {
            key: "Delivery Challan",
            name: "Delivery Challan",
            url: "/deliveryChallan"
          }
        ]
      },
      {
        name: "Purchase",
        links: [
          {
            key: "Purchase Order",
            name: "Purchase Order",
            url: "/purchaseOrder"
          }
        ]
      }
    ]}
  />

我得到以下输出：

如何删除每个 link 组之间的空 space？我试过 styles 道具，但我无法摆脱额外的 space。

Answer 1

导航组上似乎有一个名为 ms-Nav-groupContent 的 class，margin-bottom 为 40px。只要您的 CSS 出现在默认样式之后，您就可以覆盖它。示例 here。

如果您不想将更改全局应用到所有导航组，您可以将 className 直接应用到 Nav 组件，然后使用 CSS仅 select 该导航中的组的后代组合器，例如：

.my-class .ms-Nav-groupContent {
   margin-bottom: 5px;
}

Answer 2

您可以使用以下样式道具：

styles={{
   groupContent: {
       marginBottom: "5px" 
   } 
}}

如何减少 Fabric UI 中 link 组之间的间距

How to reduce the spacing between link groups in Fabric UI

reactjs

office-ui-fabric