使用 SVGR 在 React 中自定义 Checkbox 的选中状态

本文介绍了在使用 React 和 SVGR 的项目中，如何自定义 Checkbox 的选中状态，使其显示 SVG 图标。通过将 SVG 文件放置在 `public` 目录下，并使用 URL 引用，可以有效解决 SVGR 将 SVG 转换为组件后无法直接设置 `background-image` 的问题。本文提供详细的代码示例和步骤说明，帮助开发者轻松实现自定义 Checkbox 样式。

在使用 React 开发过程中，我们经常需要自定义 Checkbox 的样式。当项目中使用 SVGR 将 SVG 文件转换为 React 组件时，直接通过 CSS 的 background-image 属性引用 SVG 组件会遇到问题，因为 SVGR 已经将 SVG 文件转换成了 React 组件，无法像普通图片那样直接引用。本文将介绍一种解决方案，通过将 SVG 文件放置在 public 目录下，并使用 URL 引用，从而实现自定义 Checkbox 的选中状态。

解决方案

1. 将 SVG 文件移动到 public 目录:

   将你的 ico_checked.svg 文件移动到项目的 public 目录下。public 目录下的文件会被直接复制到构建后的输出目录，并且可以通过 URL 访问。

2. 使用 URL 引用 SVG 文件:

   在你的 styled-components 中，修改 &:checked 伪类的 background-image 属性，使用 URL 引用 public 目录下的 SVG 文件。

    &:checked {
       background-image: url("/ico_checked.svg");
       background-repeat: no-repeat;
       background-color: #ffffff;
       background-position: 50%;
    }

   登录后复制

   注意：URL 中的路径是相对于 public 目录的。

完整代码示例

以下是完整的代码示例，展示了如何使用上述方法自定义 Checkbox 的选中状态：

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"); /* 引用 public 目录下的 SVG 文件 */
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: 50%;
  }
`;

const CheckBox = ({ id }: Props): ReactElement => (
  <StyledCheckBox type="checkbox" id={id} />
);

export default CheckBox;

注意事项

• 确保你的项目配置正确，能够正确处理 public 目录下的静态资源。
• 如果你的项目使用了不同的静态资源管理方案，可能需要调整 URL 的路径。
• 建议对 SVG 文件进行优化，减小文件大小，提高页面加载速度。

总结

通过将 SVG 文件放置在 public 目录下，并使用 URL 引用，我们可以有效地解决在使用 SVGR 的 React 项目中自定义 Checkbox 选中状态的问题。这种方法简单易懂，并且能够与其他 CSS 样式方案兼容。希望本文能够帮助你更好地自定义 React 组件的样式。

以上就是使用 SVGR 在 React 中自定义 Checkbox 的选中状态的详细内容，更多请关注php中文网其它相关文章！