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

user_1795924 0
Viewed 5335

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?

antd reactjs css
2 Answers

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.

user_100360390

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

user_92146640
Related