What is the best way to change the color of my Material Icons when I move my cursor over them?

Currently, I am integrating mui icons 5.2.0 into my React application.

Although the icon appears on the page, it remains unchanged in color when I try to hover over it.

Check out the snippet of code that I have implemented:

import EditIcon from '@mui/icons-material/Edit';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    customHoverFocus: {
        "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
    }
}));

<EditIcon className={useStyles.customHoverFocus} />

Could you please guide me on what might be missing here?

javascriptreactjsmaterial-ui

Answer №1

Here's a way to accomplish that:

 <EditIcon sx={{ "& :hover": { color: "yellow" } }} />

You can see an example in action here

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

JavaScript (specifically, using jQuery) in conjunction with AJAX

After using validation with jQuery in JavaScript and applying it to ASP.NET controls within an AJAX update panel, I encountered a problem. The validations are working correctly, but the event of the button control is still being executed despite the valida ...

javascriptjqueryasp.netajax

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question: When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this: getFavoriteLocations: function() { ...

javascriptangularjs

Trouble with Array data being saved as empty in MongoDB database after sending Axios post request from

My Schema looks like this (with some options omitted for simplicity): const SubmitDebtSchema = new Schema ({ balance: [{ balanceDate: Date, newBalance: Number }] }); This serverless function posts the Schema to my database: module.exports = as ...

reactjsmongodb

Engage in Step 2: Receive a response from the server via AJAX request

I've been utilizing AJAX in conjunction with the Play 2 framework to send requests and execute actions on the server side. Learn how to make an AJAX request with a common button in Play 2.x Troubleshooting Jquery and Play Framework 2 JavaScript rout ...

javajavascriptajaxplayframework-2.0

Strategies for detecting changes in object properties and effectively managing updates to mapped objects

I am still trying to grasp the workings of react. It seems like I need to handle the detection of form field changes (similar to how angular and knockout use observables). Here is a snippet from my react code: constructor(props) { super(props); ...

reactjsforms

Exploring the Concept of Event Bubbling in ReactJS

Having recently delved into React.js, I've encountered a roadblock that has persisted for the past three days despite my attempts at various solutions. The issue revolves around two functions in my parent component named checkout: handleSeleteAddress ...

javascriptreactjsfrontend

Tips for transforming a React sign in component into an already existing Material UI sign in component

I am looking to revamp my current sign-in page by transitioning it into a material UI style login page. Displayed below is the code for my existing sign-in component named "Navbar.js". This file handles state management and includes an axios call to an SQ ...

javascriptreactjsaxiosmaterial-uirefactoring

How to utilize JS variables for filtering an array in EJS?

Is there a way to filter my user array based on the "username" variable in JavaScript? On the server side: var users = data.filter(u => u.id.startsWith('user_')).map(u => u.value); // [{"username": "arin2115", "som ...

javascriptnode.jsexpressvariablesejs

"Encountering an issue where ng-repeat doesn't reflect updates after adding a new value to the array. Attempted to use $scope.$

Whenever the chat is opened and a name is clicked, it triggers $scope.openChat(user) which adds a name to the $scope.chat.openChats array. The ng-repeat is supposed to monitor this array for any new values but does not update. I attempted using $scope.$app ...

javascriptarraysangularjs

Unable to add an event while looping through a NodeList in JavaScript

Seeking assistance in iterating a NodeList object using javascript, and implementing a click event for each item : document.addEventListener("DOMContentLoaded", async () => { try { posts.map(post => { container.innerHTML += out ...

javascriptajaxdomforeachaddeventlistener

Enhance your website with a dynamic dropdown feature using Javascript and Bootstrap 5, allowing buttons to respond

Currently, I am experimenting with Javascript to dynamically incorporate elements into a Bootstrap 5 dropdown. To guide me, I referred to the relevant documentation which can be found here (https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-items ...

javascriptdropdownbootstrap-5

Tips for effectively interpreting a json string

Trying to extract specific fields from a JSON string and display them on an HTML page, but encountering the following error: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data This is the JSON being sent: { "Order0& ...

javascripthtmljson

Exploring Dynamic Routing using React with Axios and Node.js with Express

My database has 8 tables, each serving as an end-point for different groups. I have multiple routes in my node js/express and sequelize server-side setup to fetch JSON data without having to create separate routes for each table. On the client-side, I&apos ...

node.jsreactjsexpressaxios

Step-by-step guide to utilizing instance functions in AngularJS

Recently I started working with angular in my project but I'm struggling to figure out how to access instance functions from the original code. Here is a snippet of my function: $scope.collapsedrow = true; $scope.PlusClick = function(event) ...

javascriptjqueryangularjs

Convert a JSON object into a string using Node.js

Here is my code snippet: app.get('/status',function ( req,res) { var data = { "error": 1, 'data status': "" }; connection.query("SELECT * from status", function (err, rows, fields) { ...

javascriptjsonnode.js

Testing Vue Components - Simulating the return value of a plugin

I have a unique scenario where I need to mock the return value of a custom plugin without importing it directly into my test. By creating a mock function for the plugin, I can easily achieve this goal. However, I am unsure how to change the return value of ...

javascriptunit-testingvue.jsvue-test-utils

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

javascriptjqueryangularjsjsonangular-ui-tree

Creating a personalized and versatile table component with unique functionality: where to begin?

Looking to create a versatile table component that can adapt for both desktop and mobile versions. If the screen width is below 720px, it should display a table using div, ul, li elements with a "load more" button at the bottom. If the screen width i ...

javascriptreactjsfrontendreact-dom

Switching the angularjs variable from html; a definitive guide

How can I update a variable in an AngularJS controller using JavaScript when a specific HTML element is clicked? For instance: angular.module('app',[]) .controller('appController', function($scope, $http){ $scope.on ...

javascripthtmlangularjs

Retrieving the value of onCheck from the Checkbox/ListItem

Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...

javascripthtmlreactjsmaterial-ui