自定义 React Checkbox 的选中状态：使用 SVGR 的正确姿势_技术教程

本文介绍了在使用 React 和 SVGR 时，如何正确地自定义 checkbox 的选中状态。通过将 SVG 文件放置在 `public` 目录下，并使用 URL 引用，可以避免 SVGR 将 SVG 转换为组件带来的问题，从而实现自定义选中状态下的背景图片。

在使用 React 构建用户界面时，checkbox 是一个常见的交互元素。当需要高度定制 checkbox 的样式，特别是选中状态的视觉效果时，开发者常常会遇到一些挑战。本文将重点介绍在使用 styled-components 和 svgr 的 React 项目中，如何优雅地自定义 checkbox 的选中状态。

问题背景

通常，我们希望在 checkbox 选中时显示一个自定义的 SVG 图标，而不是浏览器默认的样式。直接在 CSS 中使用 background-image: url(${IconChecked}) 可能会遇到问题，特别是当项目中使用 svgr 将 SVG 文件转换为 React 组件时。svgr 的转换逻辑会导致无法直接通过 URL 引用 SVG 文件作为背景图片。

解决方案：利用 public 目录

解决此问题的最佳实践是将 SVG 文件放置在项目的 public 目录下。public 目录中的文件会被直接复制到构建输出目录，并且可以通过根路径下的 URL 进行访问。

步骤如下：

移动 SVG 文件： 将 ico_checked.svg 文件从原先的资源目录（例如 @assets/Icons/）移动到 public 目录下。
修改 CSS 引用： 在 styled-components 的 CSS 样式中，使用 /ico_checked.svg 这个 URL 来引用 SVG 文件。

示例代码：

import React, { ReactElement } from 'react';
import styled from 'styled-components';

interface Props {
  id: string;
}

const StyledCheckBox = styled.input`
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #d4dae4;
  border-radius: 4px;
  appearance: none;
  &:checked {
    background-image: url("/ico_checked.svg"); /* 修改这里 */
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: 50%;
  }
`;

const CheckBox = ({ id }: Props): ReactElement => (
  
);

export default CheckBox;

代码解释：