Search code examples
javascriptreactjsgatsbyantd

Ant design carousel shows "weird" blue spaces

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:

enter image description here

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.

Solution

  • 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).