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

【问题标题】：How can I change the color of the ANT Design's Spin component?如何更改 ANT Design 的 Spin 组件的颜色？
【发布时间】：2020-11-16 20:05:55
【问题描述】：

根据我的研究，我可以使用“style”属性更改 ANT 组件的样式（尽管 Spin component 的文档中并不完全如此）

这是我的尝试：

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

检查时，Spin 的每个点都是一个“<i class="ant-spin-dot-item"></i>”，color 属性不起作用。那么，如何改变 Spin 组件的颜色呢？

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

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

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

这是一个 CodeSandBox demo 更改后的 index.css。

顺便说一句。适应 antd 风格的更健壮和生产就绪的方法是创建一个custom theme。

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

【讨论】：

【解决方案2】：

另外如果你想改变提示的颜色你需要改变这个类：

.ant-spin-text { 颜色：#999； }

看起来小费课之前是 .ant-spin-tip，但这对我不起作用。

只是分享这个以防它帮助某人：D

【讨论】：