我有一个组件,基于某些 prop ,我希望能够改变悬停的背景。但基于其他 prop ,悬停应该什么都不做。这可能吗?
export const Container = styled.div`
&:hover {
background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
}
`
然而,这并不起作用。有什么建议可以这样做吗?
我有一个组件,基于某些 prop ,我希望能够改变悬停的背景。但基于其他 prop ,悬停应该什么都不做。这可能吗?
export const Container = styled.div`
&:hover {
background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
}
`
然而,这并不起作用。有什么建议可以这样做吗?
4条答案
按热度按时间2j4z5cfb1#
这将工作:
kuhbmx9i2#
您可以尝试类似以下的方法,这可能会有所帮助:
juud5qan3#
这对我有用
Codesandbox
hts6caw34#
你可以根据你传递的 prop 来设置背景。下面是一个例子,div根据多个不同的条件而改变。
默认为蓝色,根据传递的 prop ,悬停时会呈现不同的背景颜色。