当样式被选中时,我将它传递给复选框,但我是在tailwind.css文件中完成的。
我想知道是否有可能在className内联中实现这一点,因为我并不想在tailwind.css中添加许多全局样式。
这是一个组件,每当我选中它时,它都会添加一个SVG复选框,而不是默认复选框:
<input
key={color}
type="checkbox"
className="peer hidden input:checked"
name="checkbox-colors"
checked={isChecked === color}
value={color}
onClick={(e) => {
handleColorChange(e.currentTarget.value);
}}
readOnly
/>
<div className="h-full w-full flex justify-center items-center">
<CheckIcon className="hidden" />
</div>
风格是这样的:
input:checked + div svg {
@apply block;
}
因此如果可以在输入className="peer hidden input:checked..."
中使用它
1条答案
按热度按时间3okqufwl1#
实际上找到了使用
@classNames
的cn
的方法,并这样做:而且效果很好!