How to change checkbox checked color with react?

Question

There is a checkbox component:

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

export const CheckBox: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  props
) => {
  return <Input type="checkbox" {...props} />;
};

const Input = styled.input`
  ${({ theme }) => css`
    border: 1px solid white;

    &:checked {
      background-color: green;
      border-color: green;
    }
  `}
`;

I want to set its checked color to another but doesn't work. It's still the default blue background color.

---

I hope:

Before

After

Answer 1

You can create own your component for that but it takes a lot of time.

Checkout into sandbox