我有一个在多个地方使用的 ToggleButton 组件。对于其用途之一，我希望将 SVG 呈现为滑动的切换按钮的一部分（如果您查看位于评论链接中的示例，我指的是圆圈部分）。
这是我的组件代码：
const ToggleButton = ({
label,
value,
name,
onChange,
}) => (
<div className={styles.toggleButton}>
<input
id={name}
type="checkbox"
className={styles.checkbox}
value={value}
checked={value ? 'checked' : null}
onChange={onChange}
/>
<label htmlFor={name} className={styles.switch} />
</div>
);
export default ToggleButton;
这是CSS文件：
.toggleButton {
align-items: center;
}
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 12px;
background-color: gray;
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
top: -4px;
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}
.checkbox {
display: none;
}
.checkbox:checked + .switch::after {
left: 15px;
background-color: blue;
}
.checkbox:checked + .switch {
background-color: blue;
}
