Question

import { Checkbox } from 'antd' 

<Checkbox style={{ color: 'red', backgroundColor: 'black' }}>Dr John</Checkbox>

如何更改复选框而不是“约翰博士”标签的颜色？上面的样式仅更改标签的样式而不是复选框？

Answer 1

您可以使用简单的CSS

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

Answer 2

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' />

Answer 3

我能够使用@humanbean和This的答案来动态更改复选框的颜色。

Checkboxes.js

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

CSS

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

在CSS中使用var（）函数并以组件的嵌入式样式提供颜色。

Answer 4

覆盖CSS中的默认antd复选框类，并提供必要的属性以对其进行自定义。

例如，

index.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;
}

index.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"));

Answer 5

    .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;
  }
}

Answer 6

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

Answer 7

如果这不起作用

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

那么这意味着它正在被覆盖，但是原生 ant CSS 如此放置！对你很重要的 CSS 使其覆盖

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

Answer 8

要仅使用 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";
}

如何更改antd中复选框的颜色？

8 个答案: