css - 更改下拉语义 UI 中的元素文本

Question

我正在使用 react.semantic.ui 的下拉菜单，并在下拉菜单中自定义了一些 css 属性，

<Dropdown
    scrolling
    className={styles.filterDropdown}
    placeholder="Select Area, Branch or Region"
    fluid
    search
    selection
    closeOnChange
    onChange={handleChange}
    searchInput={<Input transparent className={styles.inputSearch}></Input>}
    options={[ALL_OPTION].concat(areaList({ areas, headOffice }))}
    value={codeValueRating}
  />

但是下拉列表中有一个 div 元素，其类名称为“text”，我无法更改。从元素检查中看起来像这样 https://i.stack.imgur.com/f2sQv.png

我尝试使用此处链接中的解决方案直接更改它，但它仍然没有进行任何更改，这是我在我的 css 代码中尝试的解决方案之一

.ui.selection.visible.dropdown>.text:not(.default) { color: #475fe8 !important; }

还有这个：

.filterDropdown {
  flex: 1.8;
  cursor: pointer;
  word-wrap: break-word;
  line-height: 1em;
  white-space: normal;
  min-height: 2.71428571em;
  background: #2C3245 !important;
  padding: .78571429em 1em .78571429em 1em;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: .28571429rem;
  min-width: 15rem !important;

  div.text {
    color: #475fe8;
  }

}

标签： cssreactjsdropdownsemantic-ui