How to update the Atlaskit DropDownMenu title/trigger colour while selecting an option

Question

Case Scenario: We are using the DropDownMenu Component of Atlaskit. And the trigger/title of the menu is 'Transaction' and by default, its color is 'Black'. And there are two options or DropDownItems named 'Count' and 'Amount'.

While any of the above options are selected the trigger/title colored would be updated to 'Blue' from the black.

    <DropdownMenu trigger="Transaction">
            
     </DropdownMenu>

Here the trigger title colour has to be updated.

Shihab Abrar Hossain · Accepted Answer · 2022-02-26T06:17:11.877

Solution: Firstly, we do need to update our state while any options from the dropdown menu are selected.

  const [transactionValue, setTransactionValue] = useState("Count");

 <div style={{ width: 260, paddingLeft: 10 }}>
              { transactionValue === "Count" ?
              <div id="transaction_id_1"  className="span.css-7no60z-ButtonBase">
               <DropdownMenu trigger="Transaction">
              <DropdownItemRadioGroup id="transaction">
                <DropdownItemRadio
                  id="count"
                  onClick={() => setTransactionValue("Count") }
                  defaultSelected
                >
                  Count
                </DropdownItemRadio>
                <DropdownItemRadio
                  id="amount"
                  onClick={() =>  setTransactionValue("Amount")}
                >
                  Amount
                </DropdownItemRadio>
              </DropdownItemRadioGroup>
            </DropdownMenu> 
            </div> : 
            <div id="transaction_id_2"  className="span.css-7no60z-ButtonBase" >
            <DropdownMenu trigger="Transaction">
            <DropdownItemRadioGroup id="transaction">
              <DropdownItemRadio
                id="count"
                onClick={() => setTransactionValue("Count") }
                defaultSelected
              >
                Count
              </DropdownItemRadio>
              <DropdownItemRadio
                id="amount"
                onClick={() =>  setTransactionValue("Amount")}
              >
                Amount
              </DropdownItemRadio>
            </DropdownItemRadioGroup>
          </DropdownMenu> 
          </div>
          }

  </div>

Then import the style file into your component class.

style file:

#transaction_id_1 :nth-child(1) span.css-7no60z-ButtonBase   {
    color: #2e2b2b;
    font-weight: bold;
    font-size: 16px;
}

#transaction_id_2 :nth-child(1) span.css-7no60z-ButtonBase   {
    color: #3aa7d9;
    font-weight: bold;
    font-size: 16px;
}

That's it. Now you could see that while selecting the 'Amount' option the trigger/title color is updated.

#HappyCoding :grinning:

How to update the Atlaskit DropDownMenu title/trigger colour while selecting an option

1 Answers1