本文介绍了在使用 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 进行访问。
步骤如下：
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
移动 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 => (
<StyledCheckBox type="checkbox" id={id} />
);
export default CheckBox;代码解释：
- background-image: url("/ico_checked.svg");： 这行代码指定了当 checkbox 处于选中状态时，背景图片为 public 目录下的 ico_checked.svg 文件。
优点
- 简单直接： 无需复杂的配置，直接通过 URL 引用 SVG 文件。
- 兼容 SVGR： 避免了 svgr 将 SVG 转换为组件带来的冲突。
- 性能优化： 浏览器可以缓存 SVG 文件，提高加载速度。
注意事项
- 确保 public 目录存在于你的项目根目录下。
- 在部署项目时，确认 public 目录中的文件被正确地复制到服务器。
- 如果项目使用了 CDN，可能需要配置 CDN 以正确地提供 public 目录下的文件。
总结
通过将 SVG 文件放置在 public 目录下，并使用 URL 引用，我们可以有效地解决在使用 svgr 时自定义 checkbox 选中状态的问题。这种方法简单、高效，并且与现代 React 开发流程兼容。希望本文能帮助你更好地定制你的 React checkbox 样式。
