蚂蚁设计轮播显示“奇怪”的蓝色空间答案

【问题标题】：Ant design carousel shows "weird" blue spaces蚂蚁设计轮播显示“奇怪”的蓝色空间
【发布时间】：2021-05-12 21:00:59
【问题描述】：

我昨天在 Gatsby 项目中开始使用 Ant Design。我想制作一个轮播并尝试为此使用 Ant Design 组件。 Ant Design Carousel。这显示了这个结果：

蓝色的东西是轮播，但我的代码中有 4 个，但屏幕上有 9 个蓝色空间。我不明白这些是从哪里来的。

当我单击下面的按钮 2/3/4 时，所有蓝色空间都消失了。当我点击按钮 1 时，它们都会重新出现。

我的导入和代码：

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',
  };

感谢所有帮助。

【问题讨论】：

标签： javascript reactjs gatsby antd

【解决方案1】：

这是因为您没有包含 CSS 样式表。确保使用以下导入添加样式：

import 'antd/dist/antd.css'

如果您使用的是 Gatsby.js，您可以将其添加到您的 gatsby-browser.js 文件中。如果该文件不存在，您可以在根目录中创建一个（与您的package.json 相同）。

【讨论】：