Interactive Material Icons with Hover Effects in CSS

I'm having trouble adding a hover effect to material icons in my code. Despite everything else looking good, the hover effect is not working as expected. Below is the code snippet I've been using:

import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import NotificationsIcon from '@mui/icons-material/Notifications';
import HelpIcon from '@mui/icons-material/Help';

const iconStyle =
{
    "fontSize": "25px",
    "color": "grey",
    "padding-right":"30px",
    "padding-top":"20px",
    "cursor":"pointer",
    "borderRadius": "10%",
    "&:hover": { "color": "black" }
}
<HelpIcon style={iconStyle}/>
                <NotificationsIcon style={iconStyle}/>
                <ManageAccountsIcon style={iconStyle}/>
cssreactjsuser-interfacematerial-uihover

Answer №1

I finally cracked the code! Using the sx keyword instead of style did the trick. Here's the updated solution:

import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import NotificationsIcon from '@mui/icons-material/Notifications';
import HelpIcon from '@mui/icons-material/Help';

const iconStyle =
{
    "fontSize": "25px",
    "color": "grey",
    "padding-right":"30px",
    "padding-top":"20px",
    "cursor":"pointer",
    "borderRadius": "10%",
    "&:hover": { "color": "black" }
}
<HelpIcon sx={iconStyle}/>
<NotificationsIcon sx={iconStyle}/>
<ManageAccountsIcon sx={iconStyle}/>

Answer №2

Utilizing pseudoselectors (&:hover) within inline styles is not possible. This restriction does not stem from React or Material UI, but rather it is inherent to CSS.

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

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

javascriptcsshtml

Creating a styled slider thumb using Styled Components

Having some trouble styling a slider using styled-components for React. Specifically, I am unsure how to style the thumb of the slider. Here is the CSS code I have: .faderInput::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; heig ...

cssreactjsstyled-components

What is the process of synchronizing state in react.js?

I am struggling to update the state and component in my code. When I press a button and change the value of one of the props in the popup component, the prop value does not get updated. I suspect this issue is due to using setState. I researched a possible ...

javascriptreactjsreact-hooksmaterial-ui

Why is my code executing twice rather than just once?

` import './App.css'; import ArrayState from './components/ArrayState'; import FetchApi from './components/FetchAPI/FetchApi'; import Login from './components/Login'; import Useeffect2 from './components/Use ...

javascriptreactjs

One way to concatenate texts in an array of dictionaries while keeping the order intact in JS/React is to compare and match specific key-value pairs

My dataset looks something like this: Record= [ { "tid":1, token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": ...

javascriptreactjsarraysstringdictionary

Arrange elements with Material-UI's Grid system

Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes. For screens sized lg and above, I want the components t ...

cssreactjsmaterial-ui

Error: The npm-link library encountered an invalid hook call

Problem Description: I am working on developing a package named eformless. To set up the package, I utilized CRA to create a directory named sandbox where I linked the package. However, I keep encountering an error when attempting to launch the sand ...

node.jsreactjstypescriptnpmnpm-link

Encountering the error message "Error: Unable to process rejection (TypeError): that.setState function is not defined" while using ReactJS

I've been working on a dynamic chart that changes based on the Slider value. I did some research and everyone suggests that I need to bind it to resolve this error. However, no matter how many times I try to bind the function in different ways, I keep ...

javascriptreactjssliderdynamic-chart-series

Renewing JWT tokens and enhancing security for client-side applications

I have a react app that connects to a node/express back end using JWT for protected routes. While it's working fine, I'd like to extend the user session beyond the default 30-minute timeframe. What is the most effective approach for securing ses ...

node.jsreactjsrestexpressjwt

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

How can I determine the mouse's location relative to the bottom right corner of the

Currently, I am in the process of writing jQuery code that will detect if the mouse is positioned near the bottom or right side of a window, and then adjust the tooltip's position accordingly. This becomes crucial because the table in which these tool ...

jqueryhtmlcss

Formatting an HTML table for mobile devices

Hi everyone, I'm struggling to understand why my table is displaying incorrectly when switching to the mobile version. I've attempted various CSS adjustments to correct it, but the issue persists when viewed on mobile devices. Mobile view of the ...

htmlcss

Display the number of rows per page on the pagination system

Looking for a way to add a show per page dropdown button to my existing pagination code from Mui. Here's the snippet: <Pagination style={{ marginLeft: "auto", marginTop: 20, display: "inline-b ...

javascriptreactjsmaterial-uipagination

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

javascriptreactjsmaterial-ui

In Firefox, the image width may vary compared to the one that was originally inserted

Greetings to all! I have encountered an issue while using jcrop with Firefox as my browser. It seems that the image size does not match the actual dimensions, allow me to elaborate. The image appears to be 20% larger than its displayed size, despite being ...

htmlcssfirefox

Is there a way to have a border specifically on the top side?

Is there a way to have the border show up only on the top when hovering over it? Here's the current code I'm using: a:hover { border-top: 3px white; border-style: solid; } Even though this code is in place, the border still appears on ...

cssborder

Challenges in transitioning from React version 15.4 to version 16

I am in the process of migrating my entire project and running into an issue with the main.jsx file. "react-router": "3.0.x" "material-ui": "^0.19.4" "react-redux": "4.4.8" Encountering an error stating "Objects are not valid as a React child (found: ...

reactjsreact-routermaterial-ui

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

cssoverflow

404 error occurs when prefetching using Next.js <Link> tag

I recently created a Next.js application with dynamic routing, but I'm encountering some unusual behavior with the prefetching done by the <Link> component. Every now and then (usually after a rebuild, but not consistently), all the prefetch re ...

reactjsnext.jsnext-link

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs