Стиль наведения ссылки на компонент для использования наведения

Question

Я использую реактив-маршрутизатор-дом для создания своих маршрутов, потому что в моем меню используется компонент Ссылка, но я хочу настроить этот компонент. У меня есть настройки с помощью 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-link" и создать стиль для класса?

Например:

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

Answer 2

Я не совсем уверен, если вы можете сделать это так, вы можете сделать одно из следующих действий:

1. Использовать там стилизованные компоненты, вы можете просто стилизовать тег Link с любым стили, которые вы хотите с чистым css code
2. Используйте mouseEnter, mouseLeave events
3. Стилизуйте его как обычно