如何更改ANT Design的Spin组件的颜色？

Question

根据我的研究，我可以使用“style”属性更改ANT组件的样式（即使在旋转组件文档中并没有明确说明）。

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

检查发现，Spin组件中的每个点都是一个“<i class="ant-spin-dot-item"></i>”，且 color 属性无效。那么，我该如何改变Spin组件的颜色？

- Ericson Willians

Answer 1

您可以通过调整组件 CSS 文件中的 ant-spin-dot-item 的背景颜色来设置旋转组件的颜色。

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

这里有一个已更改index.css的CodeSandBox演示。

---

顺便说一下，一个更加健壮和适用于生产环境的方法是创建一个自定义主题来调整antd风格。

在我的项目中使用定制化的Webpack配置效果很好。

- zerocewl

Answer 2

如果您想要更改提示的颜色，您需要更改这个类：

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

看起来之前提示的类是.ant-spin-tip，但对我没有用。

只是分享这个，以防有人需要 :D

- Ana

Answer 3

第一个答案很好。我只想补充说，现在（在我的情况下是 antd 5.6.4），你必须添加 !important 才能使其工作。

.ant-spin-dot-item {
  background-color: orange !important;
}

- Oleg Ivsv