使用 SVGR 在 React 中自定义复选框选中状态

本文介绍了在使用 SVGR 将 SVG 图标转换为 React 组件后，如何自定义复选框选中状态下的显示效果。核心在于将 SVG 文件放置于 `public` 目录下，并通过 URL 直接引用，从而避免 SVGR 将其作为组件处理，进而实现 `background-image` 样式的正确应用。

在使用 React 和 styled-components 开发项目时，我们经常需要自定义复选框的样式。如果使用 SVG 图标作为选中状态的标记，并结合 SVGR 将 SVG 转换为 React 组件，可能会遇到一些问题。本文将介绍如何解决在使用 SVGR 的情况下，正确显示复选框的选中图标。

问题描述

当使用 SVGR 将 SVG 文件转换为 React 组件后，直接在 styled-components 中使用 background-image: url(${IconChecked}) 的方式来设置选中状态的图标会失效。这是因为 SVGR 将 SVG 文件转换为了 React 组件，而 background-image 需要的是 URL。

解决方案

解决此问题的关键在于避免 SVGR 将 SVG 文件作为组件处理，而是将其作为静态资源引用。一种常用的方法是将 SVG 文件放置在 public 目录下，然后通过 URL 直接引用它。

具体步骤

1. 将 SVG 文件移动到 public 目录： 将你的 ico_checked.svg 文件移动到项目的 public 目录下。如果 public 目录不存在，需要手动创建。

   

   Etna

   Etna：用文字做AI世界的造物主

   下载

2. 修改 styled-components 中的样式： 在 styled-components 中，使用绝对路径 /ico_checked.svg 引用 SVG 文件。

import styled from 'styled-components';

const StyledCheckBox = styled.input`
  /* 其他样式 */
  &:checked {
    background-image: url("/ico_checked.svg");
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: 50%;
  }
`;

示例代码

以下是一个完整的示例，展示了如何使用这种方法自定义复选框的选中状态：

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;

注意事项

• 确保你的项目配置正确，能够正确访问 public 目录下的静态资源。
• 如果你的项目使用了不同的静态资源管理方式（例如，Webpack 的 file-loader），可能需要进行相应的配置调整。
• 这种方法适用于简单的 SVG 图标。如果 SVG 文件非常复杂，或者需要动态修改 SVG 的属性，可能需要考虑其他解决方案。

总结

通过将 SVG 文件放置在 public 目录下，并使用 URL 直接引用，可以有效地解决在使用 SVGR 时，复选框选中图标无法显示的问题。这种方法简单易行，适用于大多数场景。希望本文能够帮助你更好地自定义 React 项目中的复选框样式。