如何更改 Semantic UI React Dropdown 的边框颜色？答案

【问题标题】：How to change border color of Semantic UI React Dropdown?如何更改 Semantic UI React Dropdown 的边框颜色？
【发布时间】：2019-10-06 21:13:20
【问题描述】：

我已经成功实现了 Semantic UI React Dropdown，如下所示：

<div>
    <Form.Label>Search and Select Company</Form.Label>
    <Dropdown
        name='company'
        data-testid='companiesDropdown'
        placeholder='Ex. Goodyear'
        className={classes.errorState}
        fluid
        search
        searchInput={{autoFocus: true}}
        selection
        options={companies
                 ? companies.map((company, key) => {
                     return (
                        {key: key, value: company.company_id, text: company.company_name}
                       )})
                         : null}
        value={(companyId > 0) ? companyId: null}
        onChange={handleDropdownChange}
    />
    {determineErrorMessage('companyId')}
</div>

现在，如果元素处于错误状态（例如用户尚未选择项目），我想更改边框颜色。要对任何其他 HTML 元素执行此操作，我可以设置 className，但它似乎不适用于此元素。

在上面的示例中，我只是硬编码 className={classes.errorState} 其中 errorState: { borderColor: 'red' } 但这样做不起作用。

关于如何使其正常工作的任何想法？

附：作为一个临时修复，我在它周围添加了一个 <div> 包装器，除了你可以清楚地看到 <div> 的边框和 <Dropdown> 元素的边框之外，这种方法可以工作。

【问题讨论】：

标签： css reactjs semantic-ui-react

【解决方案1】：

嗨，我为你重新设计了语义示例

因为它是一个 div 而不是一个真正的 HTML 列表，所以试试这样

CSS

 .dropdownRed {
     border: 1px solid red !important;
  }

JSX

 <Dropdown.Menu className={errClass}>

Link 工作代码和框演示

【讨论】：

感谢您所做的所有工作！在我对我的代码“执行手术”之前，我相信您已经看到我的语义 UI 下拉菜单是动态填充的。所以我不能使用你的确切解决方案。我可以设想有一个<Dropdown ...> 元素和<Dropdown.Menu ...> 元素。下面是否有第三个元素，我可以在其中迭代我的 companies 数组，或者我应该像你所做的那样只实例化 <Dropdown.Item ...> 元素？
@robertwerner-goodyear 我要么像在数组映射中一样将你的项目添加到列表中，要么只是放弃语义 DD 并使用标准选择
我选择使用它的原因是因为我正在使用它的搜索/过滤功能，这是我以前的票证的要求。使用它似乎比自己构建这样的功能要快。