React Ant Design Card 组件没有用户界面

Question

我在我的 React 项目中导入了 ant 设计，我想创建一张卡片并添加一些额外的信息。卡片已成功创建，其中也有值，但卡片的用户界面未显示。这个问题可能与 Material UI 有关吗？我在几个组件中使用它，但在我当前的组件中我只使用 ant 并且导入的模块不包含 MUI 元素。

我的代码：

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;

结果：

我做错了什么？提前致谢

Answer 1

只是将评论中提到的内容放在这里，以防其他人运行加入此主题。导入 antd 的样式表：

1- 在 index.html 文件中，在 head 标记中添加以下内容：

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

注意：上面使用的 href link 只是我在撰写本文时恰好使用的版本的 cdn link。确保获得您可能使用的任何版本的正确 link here

2- 在根组件中确保导入 CSS 文件：

import 'antd/dist/antd.css'

React Ant Design Card 组件没有用户界面

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

reactjs

antd

card