Reactjs 在Ant Design中为复选框设置动态样式

是否可以从JSX在复选框中动态设置勾选容器的样式backgroundColor和borderColor

我可以用CSS/LESS实现，但我需要根据API中的数据设置特定的颜色

例如：

---

.

您刚刚对其进行了样式化，例如

    <Checkbox 
       style={{ 
           backgroundColor: data.backgroundColor, 
           borderColor : data.borderColor 
       }} 
    />

---

如果在运行之前API中的颜色对您来说是完全未知的，那么使用Antd库就无法完成任务。因为需要更新.ant checkbox checked.ant checkbox internal的颜色的类嵌套在父组件中，并且只能在.less文件中更改。 正如您在Rafael的示例中所看到的，您只能从.js文件控制parent.ant复选框包装的颜色

另一方面，如果你知道总会有，比如说1890FF、FA8072和008100种颜色，你只是不知道它们的顺序，你可以通过围绕CSS类创建逻辑来轻松地动态更改颜色。这意味着您可以映射所有复选框，并根据从API getColor函数获得的颜色给出类名。为此，在.js文件中，从API导入数据并定义getColor函数：

import React, { PureComponent } from "react";
import { Checkbox  } from "antd";

export default class ColoredCheckboxes extends PureComponent {
    getColor = color => {
        let checkboxClassName = "checkbox-green";
        if (color === "#FA8072") {
            checkboxClassName = "checkbox-orange"
        }
        if (color === "#1890FF") {
            checkboxClassName = "checkbox-blue"
        }
        return checkboxClassName;
    };

    render() {
        const dataFromAPI = [
            {
                key: "first",
                name: "First",
                color: "#008100",
            },
            {
                key: "second",
                name: "Second",
                color: "#FA8072",
            },
            {
                key: "third",
                name: "Third",
                color: "#1890FF",
            },
        ]
        return (
            <div>
                {dataFromAPI.map(item => (
                    <div key={item.key}>
                        <Checkbox className={this.getColor(item.color)}>
                            {item.name}
                        </Checkbox>
                    </div>
                ))}
            </div>
        );
    }
}

---

我可以看到API中的数据吗？它只从API中获取普通的十六进制颜色，类似于ff0000。在这种情况下，样式不应用于复选框，而是应用于整个容器。@JV您没有任何代码示例。我怎样回答这个问题？

.checkbox-green {
    .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #008100;
        border-color: #008100;
    }
}
.checkbox-orange {
    .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #FA8072;
        border-color: #FA8072;
    }
}
.checkbox-blue {
    .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #1890FF;
        border-color: #1890FF;
    }
}