本文介绍了在使用 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;
代码解释：
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 样式。
以上就是自定义 React Checkbox 的选中状态：使用 SVGR 的正确姿势的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599554.html
微信扫一扫 
支付宝扫一扫 
