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

Posted 2023-02-22

【中文标题】react-select 中的 <Select /> 组件看起来很奇怪

【英文标题】：<Select /> component from react-select looks strange

【发布时间】：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

【参考方案1】：

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

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

希望这会有所帮助:)

【讨论】：

同样的结果

【参考方案2】：

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