<Select /> component from react-select looks strange

Question

I want to use <Select /> component from react-select, so I've copied an example from the component's site 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>
        )
      }
    }

But it looks strange:

What should I do in order to make it looks like this?

Answer 1

The import of import 'react-select/dist/react-select.css' is the issue here. To include 'react-select' in your app, you just need to use import Select from 'react-select' and it will do all the job. You will get the exact type-ahead drop-down box as shown in the original example.

Just to wrap it perfectly in the app, you can use the traditional div with the className and you will get what you're looking for.

Hope this helps :)

Answer 2

看起来组件的 CSS 没有正确加载或者它的样式被覆盖。