Ant Design 在 React js 项目中不起作用

Question

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在一行中！

非常感谢您的帮助！谢谢

Answer 1

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

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

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

Ant Design 在 React js 项目中不起作用

Ant Design does not work in react js project

javascript

reactjs

styled-components

next.js

antd