如何在选择选项时更新 Atlaskit DropDownMenu title/trigger 颜色

Question

案例场景： 我们正在使用 Atlaskit 的 DropDownMenu 组件。而菜单的 trigger/title 是 'Transaction'，默认情况下，它的颜色是 'Black'。并且有两个选项或名为 'Count' 和 'Amount' 的 DropDownItems。

如果选择了上述任何选项，trigger/title 彩色将从黑色更新为 'Blue'。

    <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>

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

样式文件：

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

就是这样。现在您可以看到，在选择 'Amount' 选项时，trigger/title 颜色已更新。

#HappyCoding :咧嘴笑:

如何在选择选项时更新 Atlaskit DropDownMenu title/trigger 颜色

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

reactjs

atlaskit