Styled Component fill div height inside MUI Grid

0
votes

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

1
cssmaterial-uistyled-components

1 Answers

0
votes

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}}>