React Ant Design Card 组件没有它的用户界面答案

【问题标题】：React Ant Design Card component doesn't have its user interfaceReact Ant Design Card 组件没有它的用户界面
【发布时间】：2021-07-06 11:27:00
【问题描述】：

我在我的 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;

结果：

我做错了什么？提前致谢

【问题讨论】：

你是如何将 antd CSS 导入你的项目的？您是否在根组件和index.html 文件中都导入了'antd/dist/antd.css'？
啊，床单。这就是问题所在。不知何故，我删除了我的导入。该死。谢谢
不客气！每次我用 antd 开始一个新项目时，我似乎都会遇到这个问题:)

标签： reactjs antd card

【解决方案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 链接只是我在撰写本文时碰巧使用的版本的 cdn 链接。确保获得您可能使用的任何版本的正确链接here

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

import 'antd/dist/antd.css'

【讨论】：