web-dev-qa-db-ja.com

AntDのチェックボックスの色を変更する方法

import { Checkbox } from 'antd' 

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

チェックボックスの色を変更するには、ラベル「DR John」の色を変更しますか？上記のスタイルは、チェックボックスではなくラベルのスタイルを変更しますか？

reactjsantd
9
Henok Tesfaye

ただ上書きを上書きします @checkbox-color 変数が少なくなります。

0
Tárcio Zemel
    .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
Keshav Gera

私は@ Hunghbean'sを使ってチェックボックスの色を動的に変更することができました この 答え。

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（）関数を使用し、コンポーネントのインラインスタイルに色を提供します。

0
Inyoung Kim