Search code examples
cssreactjsantd

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

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?

Solution

  • 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