本文介绍了在使用 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 直接引用它。
具体步骤
将 SVG 文件移动到 public 目录： 将你的 ico_checked.svg 文件移动到项目的 public 目录下。如果 public 目录不存在，需要手动创建。
修改 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 项目中的复选框样式。
以上就是使用 SVGR 在 React 中自定义复选框选中状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595984.html
微信扫一扫 
支付宝扫一扫 
