如何为 React 组件 DropdownList 添加 CSS 样式？

Question

我需要将React-Widget下拉列表的边框删除。

我尝试过以下方法：

HTML

<DropdownList
  data={this.props.create.repos}
  textField='key'
  placeholder={placeholder}
  className='dropdown_customized'
  onChange={this.props.save.bind(this, scenarioIndex, stepIndex, placeholder)}
  groupBy='name'
  filter='contains'
/>

CSS

.dropdown_customized {
    max-width: 200px !important;
    border: none !important;
}

但是由于它创建了一个在DropdownList之外的div，所以样式没有被应用。

有人知道如何解决吗？？

更新

displayInputBox函数返回DropdownList。

<div className="flex-container">
   <span className="blueTag"> &emsp;&emsp; {step.stepOne} </span>
   <div className="divider" />
   {this.displayInputBox(this, step.stepTwo, step.stepId, item.scenarioId)}
</div>

   .flex-container {
      display: flex;
      align-items: stretch;
   }

- Niveditha Karmegam

---

你能给我们展示一下这个组件生成的HTML吗？ - Zenoo

@Zenoo，我已经更新了问题 :) - Niveditha Karmegam

我的意思是最终的HTML结果，当所有东西都已经处理完毕时。 - Zenoo

没有任何样式被应用。只显示初始下拉列表。但我会添加一张截图。 - Niveditha Karmegam

我不是指它如何显示，我只需要最终的HTML代码，您可以通过检查元素找到它。 - Zenoo

好的，我的错。我会添加一个HTML的截图。 - Niveditha Karmegam

Answer 1

您可以尝试使用DropdownList类。

.rw-widget-container{
    border: none;
}

- Simonov Dmitry

---

但这会改变页面中所有React-widget元素的样式.. 我只想将此样式应用于特定的div。 - Niveditha Karmegam

尝试以下代码： .try .dropdown_customized .rw-widget-container{ border: none; } - Simonov Dmitry