Ant Design does not work in react js project

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;

in this code.. Ant Design Row, Col Component does not work..

my first time to use ant design.. I don’t know how to figure it out..

I add result screen!

And I hope Hello World is in one line!

I’m really appreciated for your kind help! Thank you

Answer

The code looks alright to me. My guess is you forgot to add the stylesheet in your project:

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

Ref: https://ant.design/docs/react/introduce#Usage

Advertisement

Answer