Adjusting the height of a div inside a Material-UI Grid using Styled Components

When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%?

Check out the sandbox here

Answer №1

Instead of using a traditional grid container, you've opted to utilize the ListItem component in your design (whether out of necessity or convenience). By default, this component comes with its own padding.

To remove this padding, simply adjust the padding value of the component to 0:

<ListItem button style={{padding: 0}}>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

I encountered a height discrepancy when attempting to style an unordered list to resemble a table

I have created a set of ul lists that appear as a 2-column table, just as I needed. However, an issue arises when the content of any list increases. The problem is that equal height is not being applied, causing the table to look broken. Here is my Fiddle ...

Styles for reading on Safari using an iPhone's reader mode

Currently in the process of optimizing my website for iPhones and exploring the Safari reader function. I believe it's a useful feature for websites with lengthy text, similar to mine, but I want to customize it slightly. Is there a way to adjust th ...

Tips for creating td/th elements with a consistent width?

I am currently working on a website where I need to create a table with fixed width td tags, rather than the entire table having a fixed width. This is necessary because I will be dynamically showing and hiding columns using jQuery, and also using a jQuery ...

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

https://i.stack.imgur.com/bitod.png In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is </label><label for="address_zip" class="zip"> without a line break following ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

What is the best method for obtaining table structure using Bootstrap dropdowns?

[Using span instead of table element][1] [Using the table element][2] Currently working with Bootstrap 5, my goal is to have a fixed-width table in place of dropdown menu items. I aim to position the text in the 3rd column all the way to the right. The da ...

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

MUI: encountering issue with setting background color on Paper component

I am having trouble styling the MUI <Paper> component. I have tried to change the background color using CSS, but it remains white despite other properties like padding and text-align working fine. Can someone please advise me on what I might be ov ...

Android application with a Material theme featuring a backdrop menu and a nested scroll view

I'm currently facing an issue with the display of the backdrop menu from material-ui for android. It is appearing on top of a nested scroll view when scrolling, despite my attempts to use the elevation property on various elements. Here is the layout ...

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

Setting the display property to none continues to impact the positioning of elements

Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

When you hover over one box, watch as another magically vanishes

How can I make one div disappear by hovering over another? When I use the code .icon:hover + .info { display:none), it just displays that div underneath instead of making it disappear. I'm not sure if the placement of the divs in the HTML is affectin ...

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

Having issues with media queries functioning incorrectly in VS Code

`@media(min-width:300px)and(max-width:400px){ div{ background-color: pink; } }` While experimenting with responsive design techniques, I attempted to implement this code snippet. However, it did not work as expected in Visual Studio Code. ...

Why am I unable to make a selection in the dropdown menu?

Can anyone help me figure out why I am unable to select an option from the material ui library and display it in the state? Has anyone else encountered this issue? For a detailed code example, check here import React from "react"; import ReactDOM from " ...