reactjs - 如何在选择选项时更新 Atlaskit DropDownMenu 标题/触发器颜色

Question

案例场景：我们正在使用 Atlaskit 的 DropDownMenu 组件。菜单的触发器/标题是“交易”，默认情况下，它的颜色是“黑色”。并且有两个选项或 DropDownItems 名为“Count”和“Amount”。

虽然选择了上述任何选项，但触发/标题的彩色将更新为黑色的“蓝色”。

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

此处必须更新触发器标题颜色。

Answer 1

解决方案： 首先，我们确实需要在选择下拉菜单中的任何选项时更新我们的状态。

  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>

然后将样式文件导入到您的组件类中。

样式文件：

#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;
}

而已。现在您可以看到，在选择“数量”选项时，触发器/标题颜色已更新。

#HappyCoding :咧着嘴笑: