Установить стиль Dynami c для флажка в Ant Design - PullRequest
Новая
       36

Установить стиль Dynami c для флажка в Ant Design

0 голосов
/ 15 февраля 2020

Можно ли динамически устанавливать стиль контейнера для тиков backgroundColor и borderColor в Checkbox из JSX?

Я могу сделать это с помощью CSS / LESS, но мне нужно установить конкретный c на основе цвета по данным из API.

Пример:

I want to do something like this:.

Ответы [ 2 ]

1 голос
/ 17 февраля 2020

Если цвета из API вам полностью неизвестны до момента запуска, то нет способа выполнить sh задачу с библиотекой Antd. Поскольку класс, для которого нужно обновить цвета для (.ant-checkbox-checked .ant-checkbox-inner), вложен в родительский компонент и может быть изменен только в вашем файле .less. Как вы можете видеть в примере Рафаэля, вы можете управлять только цветами родительского элемента (.ant-checkbox-wrapper) из. js файла.

С другой стороны, если вы знаете, что всегда будет скажем, цвета "# 1890FF", "# FA8072" и "# 008100", вы просто не знаете, в каком порядке, вы можете легко изменять цвета динамически, создавая свои логи c вокруг CSS классов , Это означает, что вы можете отобразить все свои флажки и присвоить classNames в зависимости от цвета, который вы получаете от 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>
        );
    }
}

Затем в вашем файле .less переназначьте цвета для ".ant-checkbox-флажок. ant-checkbox-inner "класс, изначально пришедший из библиотеки Antd: 

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

enter image description here

1 голос
/ 16 февраля 2020

Вы только что разработали его, что-то вроде 

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