ant-design select 样式不正确

Question

使用 ant-design select 呈现可搜索的 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>
    );
  }
}

但是 select 下拉菜单的样式化不正确

看起来像下面

Answer 1

您是否为 ant.design 导入了 css？

import 'antd/dist/antd.css'

我在 codesandbox

上的演示

ant-design select 样式不正确

ant-design select not styled properly

javascript

drop-down-menu

reactjs

antd