如何使有条件的道具和反应动态主题？

Question

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

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

但这会出错，我使用的是样式化组件

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

Answer 1

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

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

它只会在复选框被选中并悬停时显示。但是如果你想使用 prop 功能，你可以这样做：

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

}

how to make conditional with props and react dynamic theme?