如何在React的Styled Components中为checkbox添加选中态SVG图标

问题原因 #

你导入的CheckIcon是React组件，并非图片资源路径，所以不能直接用在background-image的url()语法中，这就是控制台报错的根本原因。

修复方案 #

方案1：直接导入SVG文件路径（简单快捷）

放弃ReactComponent导入方式，直接导入SVG文件的路径，这样就能作为图片资源使用：

// 直接导入SVG文件（不是ReactComponent）
import CheckIconUrl from 'svgs/states/check-solid.svg';

export const StyledSelectionBoxInput = styled.input`
  cursor: pointer;
  margin-left: 1.8rem;
  margin-right: 1rem;
  background-color: ${darkColors.background.dark};
  appearance: none;
  border-radius: 0.2rem;
  border: 1px solid ${({ theme }) => theme.colors.border.dropdown};
  height: 2rem;
  width: 2rem;
  transition: border-color 100ms, background-color 100ms;

  &:checked {
    background-color: ${darkColors.success.toggle};
    background-image: url(${CheckIconUrl});
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem; // 根据需要调整图标大小
  }

  &:hover {
    border-color: ${({ theme }) => theme.colors.grey[400]};
  }

  &:focus {
    border-color: ${darkColors.info.main};
  }
`;

方案2：用容器组件+伪元素控制SVG显示（灵活可控）

如果需要自定义SVG的颜色、大小或动画效果，推荐用容器包裹原生input和SVG组件，通过原生input的状态控制SVG的显示：

import { ReactComponent as CheckIcon } from 'svgs/states/check-solid.svg';

// 容器组件，用于关联input和自定义样式
const CheckboxWrapper = styled.label`
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
`;

// 隐藏原生input，仅保留交互逻辑
const HiddenCheckbox = styled.input`
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
`;

// 自定义复选框样式盒子
const CheckboxBox = styled.div`
  margin-left: 1.8rem;
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.2rem;
  border: 1px solid ${({ theme }) => theme.colors.border.dropdown};
  background-color: ${darkColors.background.dark};
  transition: border-color 100ms, background-color 100ms;

  // 根据input状态改变样式
  ${HiddenCheckbox}:checked + & {
    background-color: ${darkColors.success.toggle};
  }

  ${HiddenCheckbox}:hover + & {
    border-color: ${({ theme }) => theme.colors.grey[400]};
  }

  ${HiddenCheckbox}:focus + & {
    border-color: ${darkColors.info.main};
  }
`;

// 样式化SVG图标
const StyledCheckIcon = styled(CheckIcon)`
  position: absolute;
  left: calc(1.8rem + 0.4rem);
  width: 1.2rem;
  height: 1.2rem;
  fill: #fff; // 自定义图标颜色
  opacity: 0;
  transition: opacity 100ms;

  // input选中时显示图标
  ${HiddenCheckbox}:checked ~ & {
    opacity: 1;
  }
`;

// 组件使用方式
export const SelectionBox = ({ option, checked, ...rest }) => {
  return (
    <CheckboxWrapper>
      <HiddenCheckbox
        type="checkbox"
        name={option.name}
        value={option.value}
        id={option.value}
        checked={checked}
        {...rest}
      />
      <CheckboxBox />
      <StyledCheckIcon />
    </CheckboxWrapper>
  );
};

内容的提问来源于stack exchange，提问作者Leo Messi