下拉菜单项从框中溢出

Question

使用ReactJs和SemanticUI。我试图在Dropdown，.dropdown-content，.dropdown-container上应用不同的CSS属性（隐藏的溢出，绝对位置，固定/静态，宽度），没有成功

<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';

请确保为您的元素指定一个className。

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

然后在您的css文件中使用其类名称引用您的元素。

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