你可以使用简单的css

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: red;
  border-color: red;
}

我可以使用@humanbean 's和This answer动态地更改复选框的颜色。
Checkboxes.js

<Checkbox
    value={key}
    key={index}
    style={{
        "--background-color": boxColors[index],
        "--border-color": boxColors[index],
    }}>
    Title
</Checkbox>

中央支助系统

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

在css中使用var（）函数，并提供组件的内联样式颜色。

const CustomCheckbox = styled(Checkbox)`
  ${props =>
    props.backgroundColor &&
    css`
      & .ant-checkbox-checked .ant-checkbox-inner {
        background-color: ${props.backgroundColor};
        border-color: ${props.backgroundColor};
      }
    `}
`;

使用styled-component包，您可以执行类似的操作。
<CustomCheckbox backgroundColor='green' />

覆盖css中默认的antd复选框类，并提供必要的属性来定制它。
例如，

• • 索引. css**

.ant-checkbox .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: red;
  border-color: red;
}

.ant-checkbox-disabled .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: gray;
  border-color: gray;
}

.ant-checkbox-checked .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: transparent;
  border-color: red;
}

• • 索引. js**

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class App extends React.Component {
  onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }
  
  render() {
    return (
      <div>
        <Checkbox onChange={this.onChange} disabled={true}>Checkbox</Checkbox>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

.checkbox { 
        .ant-checkbox .ant-checkbox-inner {
            border-color: red;                 // for mouse focus color
        }
      .ant-checkbox-checked .ant-checkbox-inner {
            background-color: green;         // selected color
            border-color: green;
        }
    }



.checkbox {     
  .ant-checkbox-checked .ant-checkbox-inner {
        background-color: green80;
        border-color: green80;
    }   
    .ant-checkbox-wrapper:hover .ant-checkbox-inner,
  .ant-checkbox:hover .ant-checkbox-inner,
  .ant-checkbox-input:focus+.ant-checkbox-inner {
    border-color: green80 !important;
  }

  .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: green80;
  }
}

只需覆盖@checkbox-color Less变量。

如果这行不通

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac;
    border-color: #3350ac;
  }

那么这意味着它被覆盖，但本机蚂蚁CSS所以把！重要的是你的CSS，使它overr

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac !important;
    border-color: #3350ac !important;
  }

要仅使用CSS动态更改Checkbox，您还可以将className添加到Checkbox，然后在CSS中访问它，如下所示：

<Checkbox className="my-checkbox">Your checkbox</Checkbox>

然后在CSS中

.my-checkbox > ant-checkbox-checked .ant-checkbox-inner {
    background-color: "red";
    border-color: "red";
}