Как изменить цвет границы раскрывающегося списка Semantic UI React? - PullRequest
Новая
       51

Как изменить цвет границы раскрывающегося списка Semantic UI React?

2 голосов
/ 07 октября 2019

Я успешно реализовал выпадающий список Semantic 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' }, но это не сработает.

Есть идеи о том, как заставить это работать правильно?

PS В качестве временного исправления я добавил обертку <div>, котораяработает, за исключением того, что вы четко видите границу <div> и границу элемента <Dropdown>.

1 Ответ

0 голосов
/ 07 октября 2019

Привет, я переделал семантический пример для вас

Поскольку это div, а не настоящий список HTML, попробуйте это так

CSS 

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

JSX 

 <Dropdown.Menu className={errClass}>

Ссылка на рабочие коды и демоверсию коробки

...