CODEWITHSUNDEEP
reactjsantdcard
MrNobody
MrNobody

Reputation: 655

React Ant Design Card component doesn't have its user interface

I imported the ant design in my react project and I wanted to create a card and add some extra info. The card is succesfully created also has values in it but the user interface of the card is not showing up. Is this problem maybe related to Material UI? I use that in a few components, but in my current one I only use ant and the imported modules are not containing MUI elements.

My code:

import {Row, Col, Card} from 'antd';
const {Meta} = Card

function MyComp() {
       const createCards= Products.map((product, index)  => {
        return <Col lg={6} md={8} xs={24} key={index}> 
             <Card hoverable={true}>
                 <Meta title={product.Title} description={`$${product.Price}`} />
             </Card>
        </Col>
     })

     return (
        <div style={{width:'75%', marginTop: '10rem'}} >
            <div style={{ textAlign:'center'}}>
                <h2> Marketplace </h2>
            </div>

            <div>
                <Row gutter={[16,16]}>
                    {createCards}
                </Row>
            </div>
        </div>
    )
}
export default MyComp;

The result:

enter image description here

What am I doing wrong? Thanks in advance

Upvotes: 0

Views: 781

Answers (1)

theJuls
theJuls

Reputation: 7470

Just putting here what was mentioned in the comment in case other people run into this thread. Importing antd's stylesheets:

1- In the index.html file, add the following in the head tag:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/antd/4.8.0/antd-with-locales.js' />

Note: the above href link being used is just the cdn link of the version I just so happen to be using at the time of writing this. Make sure to get the proper link of whichever version you may be using here

2- In the root component make sure to import the CSS file:

import 'antd/dist/antd.css'

Upvotes: 1

Related Questions