Пункты выпадающего меню переполняются из коробки

Question

Использование ReactJs и SemanticUI. Я пытался применить различные свойства CSS (переполнение скрыто, абсолютное положение, фиксированное / статическое, ширина) для Dropdown, .dropdown-content, .dropdown-container, безуспешно

<div className="dropdown-container">
<Dropdown
         icon="ui search icon"
         id="roles"
         type="text"
         options={[
         {
         key: t("flot.split.roles.principal"),
         text: t("flot.split.roles.principal"),
         value: t("flot.split.roles.principal")
         },
         {
         key: t("flot.split.roles.songwriter"),
         text: t("flot.split.roles.songwriter"),
         value: t("flot.split.roles.songwriter")
         },
         {
         key: t("flot.split.roles.producer"),
         text: t("flot.split.roles.producer"),
         value: t("flot.split.roles.producer")
         },
         {
         key: t("flot.split.roles.singer"),
         text: t("flot.split.roles.singer"),
         value: t("flot.split.roles.singer")
         },
         ]}
         placeholder={t("collaborateur.attribut.indication.role")}
         search
         multiple={true}
         selection
         fluid
         value={currentRoleValue}
         onChange={this.roleChange}
         />
   </div>
   <div className="sous-titre">                           {t("collaborateur.attribut.indication.role2")}
  </div>
  </div>

.dropdown-container {
  overflow: hidden;
  width: "460px";
}
.Dropdown {
  position: fixed;
}

Answer 1

Если вы хотите применить дополнительные стили, вы можете сделать это через css. Создайте свой CSS-файл, затем импортируйте его.

import './path/to/css.css';

Обязательно присвойте своему элементу имя_класса.

<Dropdown
         icon="ui search icon"
         id="roles"
         type="text"
         className="myDropdown" />

Затем в своем файле CSS укажите свой элемент с его именем класса.

.myDropdown {
  // css here....
}