How to make the delete icon, which is child component in the Menu Item appear when I hover over it with Material UI CSS syntax?

Question

I want to make the delete icon appear whenever I hover over the menu item, which is mapped over using the map function. The idea is that when I hover over the Menu Item, the delete icon should be visible on the corresponding menu item which it is mapped to. I have tried using the material css way of doing doing this, not sure if i am doing so correctly because it is not showing. Please see my code and let me know if there are any advices that you can give me about it. Thanks!

Answer 1

Hi I tried giving the icon a class name and was able to show the icon on hover. Example . I just gave the className as a string instead of the material ui css way. Not sure why but sometimes I get issues giving pseudo class to child elements.