react-select中的<select>组件看起来很奇怪

Question

我想使用＆lt; Select /＆gt;来自react-select的组件，所以我从组件的站点https://jedwatson.github.io/react-select/复制了一个例子。     从'react'导入React，{Component，Fragment}     import从'react-select'中选择     import'alaction-select / dist / react-select.css'     export default class Test extends Component {       构造函数（道具）{         超（道具）       }     render（）{         回来（           ＆LT;片断＆gt;             ＆LT;选择               NAME =“表单字段名”               值=“你好”               的onChange = {this.handleChange}               选项= {[                 {value：'one'，label：'One'}，                 {value：'two'，label：'Two'}，               ]}             /＆GT;           ＆LT; /片断＆gt;         ）       }     } 但它看起来很奇怪： 我该怎么办才能让它看起来像这样？

Answer 1

此处的问题是导入import 'react-select/dist/react-select.css'。要在您的应用程序中包括“反应选择”，您只需使用import Select from 'react-select'，它将完成所有工作。如原始示例所示，您将获得确切的预输入下拉框。

只需将其完美包装在应用程序中，就可以将传统的div与className结合使用，您将获得所需的内容。

希望这会有所帮助：）

Answer 2

组件的CSS似乎未正确加载或其样式被覆盖。