react-select 中的 <Select /> 组件看起来很奇怪答案

【问题标题】：<Select /> component from react-select looks strangereact-select 中的 <Select /> 组件看起来很奇怪
【发布时间】：2018-07-31 02:59:18
【问题描述】：

我想使用 react-select 中的 <Select /> 组件，所以我从组件的站点 https://jedwatson.github.io/react-select/ 复制了一个示例

    import React, {Component, Fragment} from 'react'    
    import Select from 'react-select'
    import 'react-select/dist/react-select.css'

    export default class Test extends Component {
      constructor(props) {
        super(props)

      }

    render() {
        return (
          <Fragment>
            <Select
              name="form-field-name"
              value='hello'
              onChange={this.handleChange}
              options={[
                { value: 'one', label: 'One' },
                { value: 'two', label: 'Two' },
              ]}
            />
          </Fragment>
        )
      }
    }

但它看起来很奇怪：

我应该怎么做才能使它看起来像这样？

【问题讨论】：

好吧，我们看不到你的 CSS 或其他任何东西，所以很难提供帮助。
我只是在使用组件的 CSS 'react-select/dist/react-select.css' @Dave Newton

标签： javascript reactjs react-select

【解决方案1】：

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

只是为了将它完美地包装在应用程序中，您可以将传统的div 与className 一起使用，您将得到您想要的。

希望这会有所帮助:)

【讨论】：

同样的结果

【解决方案2】：

组件的 CSS 似乎没有正确加载，或者它的样式被覆盖了。

【讨论】：