Question

我已经成功实现了语义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' }进行硬编码，但是这样做不起作用。

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

P.S。作为临时解决方案，我在其周围添加了一个<div>包装器，除了可以清楚地看到<div>的边框和<Dropdown>元素的边框之外，还可以进行哪种工作。

Answer 1

嗨，我为您重新制作了语义示例

由于它是div而不是真正的HTML列表，因此请尝试

CSS

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

JSX

 <Dropdown.Menu className={errClass}>

Link到工作代码和框演示

如何更改语义UI React Dropdown的边框颜色？

1 个答案: