How to change the color of a check box in antd?

Question

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?

Answer 1

You can use simple css

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

Answer 2

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' />