CODEWITHSUNDEEP
reactjsantd
asharpharp
asharpharp

Reputation: 169

Ant Design renders elements wrong

I have a React application and am trying to make a horizontal list in it. I'm using Ant Design and decided to try using a List (https://ant.design/components/list/) such as in https://codesandbox.io/s/cz2d1?file=/index.js but I can't get it to work as expected. I created the application with create-react-app and haven't touch many settings. My App currently looks like this:

import {List, Card} from "antd"; import React from "react";

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;

This is almost verbatim from the example and yet it does not work - the elements are rendered, but they look like this: enter image description here

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

Upvotes: 0

Views: 479

Answers (1)

Jesper We
Jesper We

Reputation: 6095

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

Eh... exactly that?

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

You need to import the Ant css, like shown in the docs.

Upvotes: 1

Related Questions