Ant-design Spinner not working

Question

I put the spinner on the page and I see nothing at all. There are no console of errors or anything like that.

Here is my code:

import React, { Component } from 'react';
import { Spin } from 'antd';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">

        <Spin />
      </div>
    );
  }
}

export default App;

Answer 1

The accepted answer imports all of the library styles.

Here's a preferred way to do so

import Spin from 'antd/es/spin';
import 'antd/es/spin/style/css';

Answer 2

I believe you have forgotten to import the CSS for AndD.

@import '~antd/dist/antd.css';

https://ant.design/docs/react/use-with-create-react-app

Answer 3

The proposed solution by @HalfWebDev doesn't explain that why one should import the CSS at the component level.

Probably this is the reason Remove global Styles

But I would like to add that the proposed solution by @HalfWebDev still doesn't work. Which is to import the component level CSS only like this

import 'antd/es/spin/style/css';

The above CSS still continues adding some global styles and disturbs my styling.

Instead importing the CSS with this method worked for me

  import 'antd/lib/spin/style/index.css';