logo标签列表

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

reactjsantd
20
import { Checkbox } from 'antd' 

<Checkbox style={{ color: 'red', backgroundColor: 'black' }}>Dr John</Checkbox>
我怎样才能更改复选框的颜色，而不是标签“Dr John”的颜色？上面的样式只更改标签的样式，而不是复选框的样式。

我怎么改变复选框的颜色，而不是标签'Dr John'的颜色？上述样式只更改了标签的样式，而没有更改复选框的样式。

10个回答
28

您可以使用简单的CSS

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: red;
  border-color: red;
}
2
我想动态应用CSS（根据给定的输入，为一系列复选框设置不同的颜色）。 - Henok Tesfaye
2
这是我用 styled-components 做的一个 codeSandBox 链接。如果可行，请告诉我。 - humanbean
有没有想法如何在表格的选择复选框上实现这个功能？ - Hilal Arsa
@HilalArsa 你能分享一个例子吗？ - humanbean
好久不见，你是否碰巧知道如何在鼠标悬停时重置复选框的颜色？我已成功更改了选中项目的颜色，但在悬停时它仍然是蓝色的。 - Listopad02
好久不见，你是否碰巧知道如何在鼠标悬停时重置复选框的颜色？我已成功更改了选中项目的颜色，但在悬停时它仍然是蓝色的。 - undefined
3
const CustomCheckbox = styled(Checkbox)`
  ${props =>
    props.backgroundColor &&
    css`
      & .ant-checkbox-checked .ant-checkbox-inner {
        background-color: ${props.backgroundColor};
        border-color: ${props.backgroundColor};
      }
    `}
`;

使用 styled-components 包，你可以像这样实现以下代码。

<CustomCheckbox backgroundColor='green' />

3

我能够使用 @humanbean 和此答案，动态地改变复选框的颜色。

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()函数，并在组件的内联样式中提供颜色。
2

在您的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"));
1
如果这个不起作用
.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac;
    border-color: #3350ac;
  }

如果它被本地的 ant CSS 覆盖了，那么就在你的 CSS 中加上 !important，这样它就会覆盖原有的样式。

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac !important;
    border-color: #3350ac !important;
  }
1
1
    .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;
  }
}
1
我尝试了上述所有解决方案，但这些解决方案对我来说并不完全有效， 有时悬停效果仍然是蓝色，或者当我们勾选复选框时，点击效果仍然是蓝色，所以我将所有类都更改为这样。
.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d;
}
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d !important;
}
.ant-checkbox-checked:hover .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d !important;
}
.ant-checkbox-checked:after {
    border-color: #99b82d !important;
}
.ant-checkbox:hover::after {
    border-color: #99b82d !important;
}
.ant-checkbox:hover .ant-checkbox-inner {
    border-color: #99b82d !important;
}

!!! 使用它与您的父类一起使用，否则它将更改应用程序中的所有复选框
如果您想更改空复选框内部空间的颜色，则可以使用
.ant-checkbox-inner {
    background-color: #e3f0f5 !important;
}
谢谢，老铁！在2023年的AntD v.5.10.2版本中对我有效。 - undefined
0

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

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

然后在CSS中

.my-checkbox > ant-checkbox-checked .ant-checkbox-inner {
    background-color: "red";
    border-color: "red";
}
0
这似乎只在我不导入 antd 的 CSS 时起作用。一旦我导入 import 'antd/dist/antd.css';，accent-color 就被忽略了。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接