Ant Design 在 react js 项目中不起作用答案

【问题标题】：Ant Design does not work in react js projectAnt Design 在 react js 项目中不起作用
【发布时间】：2021-08-30 00:46:03
【问题描述】：

import React from 'react';
import styled from "styled-components";
import {Col, Row} from "antd";

const TitleBig = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 20px;
`;

const TitleSmall = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 15px;
`;

const BigContents = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 17px;
`;

const SmallContents = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 12px;
`;

const DashBoard = () => {
    return (
        <Row gutter={[32, 32]}>
            <Col xs={24} md={12} xl={8}>
                <TitleBig>Hello</TitleBig>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <TitleSmall>World</TitleSmall>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <BigContents>Hello</BigContents>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <SmallContents>World</SmallContents>
            </Col>
        </Row>
    );
};

export default DashBoard;

在这段代码中.. Ant Design Row，Col 组件不起作用..

我第一次使用ant design..我不知道怎么弄出来..

我添加结果屏幕！

我希望 Hello World 能排成一行！

非常感谢您的热心帮助！谢谢

【问题讨论】：

请更具体地说明什么不起作用，您得到的结果与您期望的结果是什么
运行代码时发生了什么？有什么错误吗？
是的。错误没有发生..但是这段代码不起作用。
我添加结果屏幕.. 谢谢！！

标签： javascript reactjs next.js antd styled-components

【解决方案1】：

代码在我看来没问题。我的猜测是您忘记在项目中添加样式表：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

参考：https://ant.design/docs/react/introduce#Usage

【讨论】：