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

Posted 2023-03-15

【中文标题】如何使用道具制作条件并反应动态主题？

【英文标题】：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;