0

The two cells marked as pink becomes pink on mouse hover. How can I fill the grid with pink 100% width & height on mouse hover?

sandbox

Community
  • 1
  • 1
killjoy
  • 864
  • 17
  • 31

1 Answers1

0

You are using the ListItem as your grid container (not sure if this is a requirement or it was just easy for you), and by default the ListItem component has padding.

You can disable this padding by settings the padding of that component to 0:

<ListItem button style={{padding: 0}}>
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • Can you please take a look at this ; [sandbox2](https://codesandbox.io/s/styled-comp-listitem-ok7j0?file=/demo.tsx) How to make the pink div full height? – killjoy Apr 14 '20 at 10:52
  • This is more of a CSS question, but you can use the solution from here: https://stackoverflow.com/questions/15381172/how-can-i-make-flexbox-children-100-height-of-their-parent Check this change to your example: https://codesandbox.io/s/styled-comp-listitem-xzl0s – Dekel Apr 14 '20 at 13:32