Ant 设计轮播显示“奇怪”的蓝色空间

Question

I started yesterday with Ant Design in a Gatsby project. I want to make a carousel and tried using the Ant Design component for this. Ant Design Carousel . This shows this result:

The blue things are the carousel, but instead the 4 I have in my code, I have 9 blue spaces on screen. I don't understand where these come from.

When I click the buttons 2/3/4 below, all blue spaces disappear. When I click on button 1 they all reappear.

My imports and code:

import * as React from "react";
import { Row, Col, Image, Table, Carousel } from 'antd';

<Carousel afterChange={onChange}>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>

function onChange(a, b, c) {
    console.log(a, b, c);
  }

  const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };

All help is appreciated.

Answer 1

It's because you haven't included the CSS stylesheet. Make sure you add the styles using following import:

import 'antd/dist/antd.css'

If you're using Gatsby.js, you can add it in your gatsby-browser.js file. If the file doesn't exist, you can create one in your root directory (the same where your package.json is).