8
votes

Comment changer la couleur d'une case à cocher dans antd?

import { Checkbox } from 'antd' 

<Checkbox style={{ color: 'red', backgroundColor: 'black' }}>Dr John</Checkbox>
How to change the color of the check box not the label 'Dr John'? The above style only change the styles of the label not the check box?

reactjs antd

0 commentaires

6 Réponses :

11
votes

Vous pouvez utiliser un simple CSS

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

7 commentaires

Je veux appliquer le css dynamiquement (différentes couleurs pour une plage de cases à cocher en fonction d'une entrée donnée).

Voici un lien codeSandBox que j'ai créé en utilisant des composants stylisés. Faites-moi savoir si cela a fonctionné.

Merci! Ça marche. Mieux vaut écrire le code sur le codepen ici.

Pouvez-vous expliquer comment vous avez découvert quelles classes antd css remplacer? Leur css est caché (j'utilise antd 2.x), merci

J'ai inspecté l'élément dans les pages de démonstration d'antd, les noms de classe apparaissent dans l'onglet styles.

une idée comment implémenter cela sur la case à cocher de sélection de la table?

@HilalArsa Pouvez-vous partager un exemple?

0
votes

J'ai pu changer dynamiquement la couleur de la case à cocher en utilisant @ humanbean's et This answer.

Checkboxes.js

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

CSS

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

Utilisation de la fonction var () dans css et fourniture de la couleur dans le style en ligne du composant.

0 commentaires

1
votes

const CustomCheckbox = styled(Checkbox)`
  ${props =>
    props.backgroundColor &&
    css`
      & .ant-checkbox-checked .ant-checkbox-inner {
        background-color: ${props.backgroundColor};
        border-color: ${props.backgroundColor};
      }
    `}
`;
with styled-component package you can do something like this.<CustomCheckbox backgroundColor='green' />

0 commentaires

0
votes

Remplacez les classes de case à cocher antd par défaut dans votre css et fournissez les attributs nécessaires pour la personnaliser.

Par exemple,

index.css

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

index.js

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

0 commentaires

0
votes

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

0 commentaires

0
votes

Remplacez simplement la variable @checkbox-color Less.

0 commentaires