How to reduce the spacing between link groups in Fabric UI

Question

How do I change the spacing between 2 nav groups within a Nav element. I have the following element:

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

I'm getting the following output:

How do I remove the empty space between each link group? I've tried styles prop, but I'm not able to get rid of the extra space.

Answer 1

You can use the following styles prop:

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