要使用悬停的组件链接悬停样式

Question

我使用react router dom来创建路由，因为这在我的菜单中使用了组件Link，但我想自定义该组件。我用const和Work进行了自定义，但我的悬停不起作用。

我的代码：

<Link className="ui-link" style={styles.menuStyle} to={'/home'}> 
<MdStore size={25} color="#5f5f5f" />
<Opt>Consumidores</Opt> 
</Link>

我的CSS，但我的悬停不起作用：

const styles = {
menuStyle: {
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
padding: '10px',
borderRadius: '8px',
margin: '5px 0px',
'&:hover': {
backgroundColor: '#171717',
},
},
};

Answer 1

为什么不使用className="ui链接"并创建一个样式到类？

例如：

a.ui-link:hover {
backgroundColor: '#171717';
}

Answer 2

我真的不确定你是否能这样做，你可以做以下之一：

1. 使用样式化组件，您可以简单地使用样式化链接标记使用纯css代码的任何样式
2. 使用mouseEnter、mouseLeave事件
3. 按照常规方式设计