Ant Design 渲染元素错误

Question

我有一个 React 应用程序，我想在其中制作一个水平列表。我正在使用 Ant Design 并决定尝试使用 List (https://ant.design/components/list/) such as in https://codesandbox.io/s/cz2d1?file=/index.js 但我无法让它按预期工作。我使用 create-react-app 创建了应用程序并且没有触及很多设置。我的应用目前看起来像这样：

从“antd”导入{列表，卡片}；从“反应”导入反应；

const data = [
    {
        title: 'Title 1',
    },
    {
        title: 'Title 2',
    },
    {
        title: 'Title 3',
    },
    {
        title: 'Title 4',
    },
];

function App() {
  return (
    <div>
        <List
            grid={{ gutter: 16, column: 4 }}
            dataSource={data}
            renderItem={item => (
                <List.Item>
                    <Card title={item.title}>Card content</Card>
                </List.Item>
            )}
        />
    </div>
  );
}

export default App;

这几乎是示例中的原样，但它不起作用 - 元素已呈现，但它们看起来像这样：

应用或索引中没有 css。可能是什么原因造成的？

Answer 1

There is no css in the app or index. What could be causing this?

呃……就是这样吗？

https://ant.design/docs/react/use-with-create-react-app#Import-antd

您需要导入 Ant css，如文档中所示。

Ant Design 渲染元素错误

Ant Design renders elements wrong

reactjs

antd