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

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

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