javascript - ant-design select 样式不正确

Question

使用 ant-design select 渲染可搜索的选择下拉列表

根据文档，我编写了以下组件

import React, { Component } from 'react';
import { Select } from 'antd';

const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

function handleBlur() {
  console.log('blur');
}

function handleFocus() {
  console.log('focus');
}

export default class SearchBarDemo extends Component {
  render() {
    return (
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={handleChange}
        onFocus={handleFocus}
        onBlur={handleBlur}
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="tom">Tom</Option>
      </Select>
    );
  }
}

但是选择下拉列表的样式未正确

如下所示

Answer 1

你为ant.design导入了css吗？

import 'antd/dist/antd.css'

我的演示 codesandbox