javascript - 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..我不知道如何弄清楚..

我添加结果屏幕！

我希望你好世界在一条线上！

非常感谢您的帮助！谢谢

标签： javascriptreactjsnext.jsantdstyled-components

Answer 1

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

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

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