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

When I view the website on a tablet in landscape mode, the navigation bar vanishes

I just finished creating a responsive menu for a website. Here's how it works: when viewing the site on a regular browser with a width less than 768px, the navigation menu items are stacked and hidden. To reveal them, the user needs to click on a tog ...

jqueryhtmlcsstwitter-bootstrapresponsive-design

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

javascriptcssreactjsmaterial-uimedia-queries

Floating Label in Material Design Interface

Has anyone discovered a resolution for the issue of Material UI and React textfield not automatically floating the label? Here is the component where I am encountering this problem - the key is passed via Redux from another component and the main data is ...

reactjslabelmaterial-ui

storing the user type in ReactJs for the duration of the session

In my development stack, I am utilizing ReactJs, Nodejs, and mysql for the backend. User sessions are being managed through express-session with cookies set in the browser. My challenge lies in displaying components based on user roles such as admin or reg ...

reactjsexpresssessioncookieslocal-storage

Creating protected routes in ReactJs using Typescript by utilizing a Higher Order Component (HOC) as

I'm struggling to create a basic HOC that can protect a component, ensuring that the user is logged in before rendering the component. Below is my attempt at building the protective HOC (not functional yet). export default function ProtectedRoute(Com ...

javascriptreactjsnext.js

GSAP TimelineLite is not being loaded correctly by NPM and Webpack

We are currently in the process of refining and optimizing a production application by cleaning up and organizing dependencies. Within our React component, we utilize GSAP for transitions, specifically only requiring the TimelineLite library. Since our an ...

node.jsreactjsnpmwebpackgsap

Tips for maintaining consistent formatting of a div element across various sizes

Looking to create a Bootstrap Jumbotron that features a background image, text (h1 and p), and a call-to-action button that scales appropriately for different viewports without sacrificing formatting. Essentially, the goal is for the div to behave like an ...

htmlcsstwitter-bootstrapcss-transitionstransform

Stop SCSS from processing CSS variables in Angular-CLI

I am currently using Angular5 with sass v1.3.2. My goal is to dynamically change a color that is widely used in the scss files of my single page app without having to recompile new files. This color is globally defined in my _variables.css as: $brand: # ...

cssangularsass

Having trouble accessing a React component class from a different component class

I just started learning reactjs and javascript. For a simple project, I'm working on creating a login and registration form. The issue I'm facing is that when a user enters their email and password and clicks 'register', instead of movi ...

javascriptreactjsauthentication

"Step-by-step guide on installing the most recent version of fontawesome using npm for a React js project

Is there a way to install the latest version of fontawesome (5.0.10) using npm when unable to do so through the standard process? I attempted the following command: npm i @fortawesome/fontawesome ...

reactjsnpmfont-awesome-5

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?

tag: In the process of creating my app with next.js, I primarily use functional components. The sole exception is a class component that I utilize to manage forms. Upon form submission, my goal is to redirect back to the home page. However, when I attemp ...

javascriptnode.jsreactjsnext.jsrouter

The React-Router is causing the incorrect component to be re-rendered

click here for image I've encountered an issue with my Routes not functioning as expected. Even though I have set the correct Route in the component, manually typing the URL leads to it re-rendering to either the home-page or localhost:3001/login. A ...

reactjsreact-routerreact-router-dom

Update the useState function individually for every object within an array

After clicking the MultipleComponent button, all logs in the function return null. However, when clicked a second time, it returns the previous values. Is there a way to retrieve the current status in each log within the map function? Concerning the useEf ...

javascriptreactjstypescript

Exploring ways to store session data in Next.js 13 with Supabase for seamless persistence

Encountering an issue with next-auth. Upon logging in, the result shows ({error: 'SessionRequired', status: 200, ok: true, url: null}), despite having an active session. The console also displays this error message, which I believe may be related ...

javascriptreactjsnext.jsnext-authsupabase

How to properly import and use a MaterialUI theme from a separate file

Hey there, I'm currently exploring MaterialUI and React. One thing I'm attempting to do is import a theme from another file and toggle between themes using a switch in MaterialUI. To accomplish this, I've created a Layout component that will ...

reactjsmaterial-ui

how can I retrieve only the child route in next js?

Need help with this title. This is my Next JS project and I am working on a custom breadcrumb component. Everything seems to be going well so far, but I am facing an issue with the /people page followed by the /people/roles page. I want to extract only the ...

reactjsregextypescriptnext.js

Error encountered: `unexpected token within ES6 map() function`

Do you see any issues with this code snippet? render(){ return ( var users= this.state.users.map(user => <li key={user.id}>{user.name}</li> ) <ul>{users}</ul> ) } I am receiving an error mes ...

javascriptreactjsecmascript-6

Blurring the background creates an "inset shadow" problem when transitioning

Problem: Strangely, when using Backdrop-filter: blur(Xpx); during a transition as shown below, unexpected "inset Shadows" mysteriously appear until the end of the transition. https://i.stack.imgur.com/uij7F.gif Illustration of the Issue Using jsfiddle Sp ...

htmlcssbluronblur

Are you in need of a collection of Avatars with stylish borders?

Recently started using MUI and experimenting with creating an AvatarGroup where each avatar has a border. I'm aiming for an effect similar to the following image: I have managed to give individual avatars a border, but when they are grouped together, ...

material-ui

Increase the spacing between the dropdown menu and the first option

I am attempting to create some space between the select box and the dropdown list. An example image can be seen below: In the top example, a div was used. Despite trying padding and margins, I did not achieve the desired results. Is it impossible to do t ...

htmlcssreactjs