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

时间:2019-10-06 21:13:20

标签: css reactjs semantic-ui-react

我已经成功实现了语义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>元素的边框之外,还可以进行哪种工作。

1 个答案:

答案 0 :(得分:0)

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

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

CSS

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

JSX

 <Dropdown.Menu className={errClass}>

Link到工作代码和框演示