css - 如何更改 Semantic UI React Dropdown 的边框颜色？

Question

我已经像这样成功地实现了语义 UI React 下拉列表:

<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> 的边界元素。

Answer 1

你好，我为你修改了语义示例

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

CSS

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

JSX

 <Dropdown.Menu className={errClass}>

Link工作codesandbox演示