如何用道具创造条件，反应动态主题

Question

我需要在复选框的悬停上设置边框，但当它被选中激活时，悬停上的边框就不存在了。我有一个带有标记的文件，如何动态地通过它们传递边界？

我希望它是这样的，在我的文件中搜索这个borders.borderWidthThin

但这是一个错误，我使用样式组件

&:hover {
border: ${(props) => (props.checked ? 'none' : '${borders.borderWidthThin}')};
cursor: pointer;
}

Answer 1

我可以在不使用道具箭头功能的情况下做到这一点：

&:checked:hover {
border-color: red;
cursor: pointer;
}

只有选中该框并悬停时，它才会显示。但如果你想使用道具功能，你可以这样做：

&:checked:hover {
border: ${props => props.checked ? 'red' : `${borders.borderWidthThin}`};
cursor: pointer;

}