如何使用道具制作条件并反应动态主题？答案

【问题标题】：how to make conditional with props and react dynamic theme?如何使用道具制作条件并反应动态主题？
【发布时间】：2021-07-13 23:53:48
【问题描述】：

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

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

但这会出错，我正在使用样式化组件

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

【问题讨论】：

【解决方案1】：

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

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

只有在选中并悬停该框时才会显示。但是如果你想使用 prop 函数，你可以这样做：

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

}

【讨论】：