Javascript 如何利用道具和动态主题制作条件动画？

我需要在复选框的悬停处设置边框，但当它被选中激活时，悬停处的边框不存在。我有一个包含令牌的文件，如何动态地通过它们传递边界

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

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

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

---

我可以在不使用道具箭头功能的情况下执行此操作，因此：

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

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

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

}