Struggling to get the onHover effect working with the Grid item component in MaterialUI

I'm currently working on a Grid layout with nested Grid components, but I've run into an issue where applying inline styles to the Grid item component isn't working as expected. As a newcomer to MaterialUI in ReactJS, I could really use some guidance on this. The Grid is contained within a Hide component that is only visible on mobile devices.

My goal is to have the Grid items change color when hovered over

This is what I've attempted:

<Hidden mdUp='hide'>
          <Grid
            container
            xs={12}
            style={{
              fontFamily: 'Old Newspaper',
              background: '#f49275',
              '&:hover': { background: 'black' },
              marginLeft: '4px',
              marginRight: '4px',
            }}
          >
            <Grid
              item
              xs={4}
              style={{
                justifyContent: 'center',
                display: 'flex',
              }}
            >
              <a href='#'>
                &diams; Github &diams;
              </a>
            </Grid>
            <Grid
              item
              xs={4}
              style={{ justifyContent: 'center', display: 'flex' }}
            >
              <a
                href='#'
                target='_blank'
              >
                &diams; LinkedIn &diams;
              </a>
            </Grid>
            <Grid
              item
              xs={4}
              style={{ justifyContent: 'center', display: 'flex' }}
            >
              <a
                href='#'
                target='_blank'
              >
                &diams; Codewars &diams;
              </a>
            </Grid>
          </Grid>
        </Hidden>
cssreactjsmaterial-uihover

Answer №1

In order to achieve a hover effect on grid items, you need to apply the hover style directly to each grid item. It's not possible to add hover styles using inline CSS. Instead, assign a className to the grid items and then define the hover styles for those classes.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import { Hidden } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  item:{
    color:'#fff',
    justifyContent: "center",
    display: "flex",
    '&:hover':{
      '&>a':{
        color:'green'
      }
    }
  }
}));

export default function SpacingGrid() {
  const classes = useStyles();
  
  return (
    <Hidden mdUp="hide">
      <Grid
        container
        className={classes.container}
        xs={12}
        style={{
          fontFamily: "Old Newspaper",
          background: "#f49275",
          marginLeft: "4px",
          marginRight: "4px"
        }}
      >
        <Grid
          item
          xs={4}
          className={classes.item}
        >
          <a href="#">&diams; Github &diams;</a>
        </Grid>
        <Grid item xs={4} className={classes.item}>
          <a href="#" target="_blank">
            &diams; LinkedIn &diams;
          </a>
        </Grid>
        <Grid item xs={4} className={classes.item}>
          <a href="#" target="_blank">
            &diams; Codewars &diams;
          </a>
        </Grid>
      </Grid>
    </Hidden>
  );
}

codesandbox link:- https://codesandbox.io/s/o8b52

If you have any further questions about using inline style in grid items, please feel free to provide more details.

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

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

htmlcsscss-grid

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...

cssgoogle-chromebackground-blend-mode

Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this? Thank you. < ...

jqueryhtmlcsstwitter-bootstrap

Tips for adjusting the height of a div element to completely occupy the unused portion of the viewport

How can I adjust the height of the sliding-in menu to fill the viewport below the mobile-navbar div without extending beyond it and causing scroll bars? The desired height should be: [100vh-(height of mobile-navbar)] I want to avoid setting a fixed value t ...

htmlcss

The infamous IE7 Bug Caused by CSS HasLayout

Initially, I've reviewed the following articles in order to refresh my knowledge on these topics as I have encountered them before: Position Relative / Absolute / Fixed in IE While the above resources may be helpful for individuals facing these issu ...

cssdebugginginternet-explorer

What is the process for obtaining data from a particular button once it has been clicked?

I have a project in development for a film review platform where users can search for movie titles. Once the title is entered, a list of films matching that title will be displayed. Each film and its relevant information are contained within a button on t ...

reactjs

Using React Native to integrate the TabBarIOS feature into the Navigation Experimental framework

I stumbled upon a fantastic React Native Navigation Experimental example that caught my eye: https://github.com/jlyman/RN-NavigationExperimental-Redux-Example This example is exactly what I was searching for. It includes a navigation bar and title, and th ...

reactjsreact-nativeuinavigationbarreduxreact-redux

Unable to bring in the Firebase Firestore Colletion

When working on my next app, I encountered an error while trying to call a Firestore Collection. The specific error message that appeared when I ran the app was: FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicat ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? I attempted to use grid-gap in the background, but it resulted in empty red squares when there weren't enough elements in a row. http ...

htmlcss

Toggle Checkbox Group for Both Multiple and Single Selection Options

Need help with a function to enable only one checkbox for single selection or multiple checkboxes for multiple selection. Use MultipleCheckbox(0) for single selection or MultipleCheckbox(1) for multiple selection. function MultipleCheckbox(elem){ i ...

javascripthtmljquerycsscheckbox

Using the style tag in ReactJS without JSX: A step-by-step guide

Seeking quick assistance: I am utilizing ReactJS with non-JSX syntax, as I find it more comfortable to work with than JSX. While I can easily create a div, I'm unsure how to incorporate the style tag similar to pure HTML. For instance, <div class= ...

reactjsjsx

Flutter DataTable: issue with missing columns and rows properties

My journey with Flutter development involving tables has hit a roadblock. The issue revolves around using DataTable to present data in a tabular format. The error message I encounter is regarding the 'columns' named parameter being undefined. Des ...

fluttermaterial-uiflutter-layout

CSS3 blending modes

I am attempting to create a design similar to this letter on an image using blending modes. Check out my code example <div id="box"> <div id="image"> <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> </div&g ...

cssblending

Is there a way to stop Material UI from dulling the color of my AppBar when using dark mode in my theme?

When I use mode: "dark" in my Material UI theme, it causes the color of my AppBar to become desaturated. Switching it to mode: "light" resolves this issue. This is how my theme is configured: const theme = createTheme({ palette: { ...

reactjstypescriptmaterial-uireact-typescript

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

I am currently working on a todo list project using the MERN stack with Redux for state management. One issue I am facing is that the checkboxes for completed tasks are not reflecting the correct state from Redux when the page loads. Even though some tasks ...

javascriptreactjsredux

Using React Hook Form with Material UI Slider

I'm facing difficulties in integrating the Material UI Slider with React Hook Form. The values are not being registered and when I check the console.log, it displays undefined. Any thoughts on where I might have gone wrong? <Controller re ...

reactjsmaterial-uireact-hook-form

Having some trouble as I work on a website using Next.js, running into an error that

While working on my website using Next.js 13, I encountered an error message upon trying to access localhost:3000: -Error1: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to co ...

reactjsnext.js

The essential guide to creating a top-notch design system with Material UI

Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported ...

javascripttypescriptmaterial-uies6-modulesparcel

Error: `this.context.router` is undefined in React

I have encountered an issue in my home page component where this.context.router is not defined. The dependencies I am using include: "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", "history": "^4.9.0", "moment": "^2.24.0", "prop-types": "^1 ...

reactjsmaterial-ui

Next.js application shows 404 errors when trying to access assets within the public directory

I've been struggling to display the favicon for my site (which uses next.js). Despite going through numerous Stack Overflow posts and tutorials, I'm feeling increasingly frustrated. The structure of my project, particularly the public directory, ...

javascriptreactjsnext.jsfaviconhead