0

I am populating a menu in react which is coming form backend . I am using react route to navigate them.I want to gray out one of them while they will populate in the screen.I have used two css class one is banking-supplies-content which is basically doing the formatting and i am also trying to apply the css disable-link to disable the pointer in the menu i want to disable , but it's not working for me. Below is the code

return (
<div className="banking-supplies-content">
   <HashRouter>
    <Route 
    exact path="/retail-banking"
    />
    <Route
      exact
      path="/journal"
      component={BankingSuppliesJournalListing}
    />
    <Route exact path="/report" component={BankingSuppliesReport} />
    <Route exact path="/invoiceSearch" component={LocationInvoiceSummarySearch} />
   <div className="disable-link">
   <Route exact path="/invoiceCreate"/>
   </div>           
    {/* <Route exact path="/" component={BankingSuppliesHome} /> */}
  </HashRouter>
  <ShowSpinner showSpinner={bankingSuppliesContextReference.showSpinner} />
  
</div>
  );
};

css i have used

.banking-supplies-content {
  margin: 20px;
}
.disable-link{
 pointer-events: none;
}

I am using the disable property to gray it out but , its not working.

enter image description here

Mandrek
  • 1,159
  • 6
  • 25
  • 55

0 Answers0