Question

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

  <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"
          }
        ]
      }
    ]}
  />

我得到以下输出：

如何删除每个链接组之间的空白？我已经尝试过styles道具，但是无法摆脱多余的空间。

Answer 1

好像在导航组中有一个名为ms-Nav-groupContent的类，其margin-bottom为40px。只要CSS遵循默认样式，您就可以覆盖它。示例here。

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

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

Answer 2

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

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

如何在Fabric UI中减小链接组之间的间距

2 个答案: