How can I change the color of the ANT Design's Spin component?

Question

According to my research I can change the style of ANT components using the "style" prop (Even though that's not exactly in the docs of the Spin component )

Here's my attempt:

<Col>
  {userCompaniesLoading ? (
    <Spin style={{ color: 'white' }} />
  ) : (
    <UserOutlined
      onClick={() => {
        setDrawerVisibility(!isDrawerVisible);
      }}
    />
  )}
</Col>

On inspect, each dot of the Spin is a " <i class="ant-spin-dot-item"></i> ", and the color property does not work. So, how can I change the color of the Spin component?

Answer 1

You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file.

.ant-spin-dot-item {
  background-color: red;
}

Here is a CodeSandBox demo with a changed index.css .

---

Btw. a more robust and production ready way to adapt antd style is to create a custom theme .

Using a customized Webpack config works good in my project.

Answer 2

Also if you want to change the color of the tip you need to change this class:

.ant-spin-text { color: #999; }

Looks like before tip class was.ant-spin-tip, but that didn't work for me.

Just sharing this in case it helps someone:D