如何使用React更改复选框颜色？

发布于 2025-02-11 22:12:26 字数 917 浏览 0 评论 0原文

有一个复选框组件：

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

我想将其检查颜色设置为另一种，但不起作用。它仍然是默认的蓝色背景颜色。

我希望：

=“在

原文

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