Modify the MUI Select icon background color on hover

I have been working on customizing the MUI Select method, and I've encountered difficulty when trying to hover over the "NarrowDownIcon":

https://i.sstatic.net/VEZFP.png

My goal is to change the hover behavior of this icon by setting its backgroundColor to "blue". Here is the code I have used:

icon: {
  color:        theme.palette.primary.dark,
  height:       32,
  width:        32,
  top:          `calc(50% - ${theme.spacing(2.2)}px)`,
  borderRadius: "50%",
  cursor:       "pointer",

  "&:hover": {
    backgroundColor: theme.palette.primary.lighter,
  },
},

I then applied this CSS to the select icon class:

  <Select
      value={selectedValue}
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
      className={classes.textInput}
      inputProps={{
        id,
        name: id,
      }}
      classes={{
        icon: classes.icon,
      }}

However, it seems that my approach is not working. Can anyone provide assistance with this issue? Thank you.

javascriptcssreactjsmaterial-ui

Answer №1

To adjust the icon color upon hovering anywhere within the Select component:

root: {
  "&:hover .MuiSvgIcon-root": {
    color: "red"
  }
},

<Select className={classes.root}>

If you want to change the icon color specifically when hovering over the icon itself (excluding the input field), please note that your code may not work due to the icon having pointerEvents set to none:

icon: {
  pointerEvents: "auto",
  "&:hover": {
    color: "red"
  }
}

<Select classes={{ icon: classes.icon }}>

https://codesandbox.io/s/69698834-material-ui-select-component-change-icon-background-color-when-on-hover-gbwbx?file=/demo.js

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

Dealing with error handling in NUXT using asyncData and Vue actions

The URL I am trying to access is http://mywebsite.com/[category that doesn't exist]. Despite the code snippet provided below, I am unable to reach the catch block in asyncData. async asyncData({ params, store }) { try { await store.dispatch(&ap ...

javascriptvue.jsnuxt.js

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

I've recently started exploring NodeJS Express and came across the official tutorial from express-ws for setting up websockets in a simple project generated using npx express-generator. While following the tutorial, I noticed that in the app.js file, ...

javascriptnode.jsexpress

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

javascripthtmlcss

AngularJS application: the button requires two clicks to activate

In my attempt to develop a simple CRUD app using AngularJS, I encountered an issue. The initial step involves clicking a button that fetches data from a REST API and populates an array. This array is then iterated using ng-repeat to generate Bootstrap card ...

javascriptangularjs

Interdependent function calls between two functions

When faced with the task of recursively checking two objects with sorted keys, I came up with a solution involving two functions. buildObj - this function retrieves all unique keys from the objects, sorts them, and then calls buildObjKey for each key bui ...

javascriptfunctionrecursionfunctional-programming

I am encountering issues with running my tests using react-testing-library alongside TypeScript

Currently facing issues with react-testing-library in my TypeScript-based React project. Despite researching and following various tutorials, I am unable to resolve the problem. I have experimented with changing configurations in babel.config.js, tsconfig ...

reactjstypescriptjestjsbabeljsreact-testing-library

What causes the intersection observer handler to not trigger when using scrollTo or scrollIntoView?

When an intersection observer is added to an element, it triggers the handler function when scrolled past a specific point. However, if the element is scrolled past that point using a button click, the handler does not get triggered. Is there a way to man ...

javascriptscrollintersection-observer

Angular Material Rotate Ink Bar to Vertical Orientation

After wanting to change the orientation of Angular Material's Tab Component to vertical, I visited this page (Tabs) and experimented with the CSS. By making the necessary adjustments, I successfully displayed the tabs vertically using the following CS ...

cssangularangular-materialmaterial-design

Avoid rendering the React component until the AJAX call has completed

Suppose the following code is given: componentDidMount() { $.ajax({ type: 'GET', url: '/data/', dataType: 'text', success: function(response) { this.setState({data: response}) ...

javascriptjqueryajaxreactjs

Experiencing a hiccup in your jQuery animation?

Click here to access the fiddle demonstrating the issue. A situation arises where a span with display: inline-block houses another span that is being slowly hidden. The container span unexpectedly shifts back to its original position once the hiding proces ...

javascriptjquerycss

Positioning elements precisely on a webpage through absolute positioning and floating them

This seems to present a conflicting situation. Ideally, I am looking to position two child elements on the left and right edges of the parent element, vertically centered, and overlaying all other sibling elements. ...

csscss-floatcss-position

In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here The html: <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet"> <link href="https://ma ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble passing parameters in a Node.js express POST request?

Here is the code snippet I am currently working with: const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })); app.post('/rasp&apos ...

javascriptnode.jshttppostexpress

Tips for Saving process.argv in a .js File for Future Reference

I am struggling with passing process.argv value to a config file for later use. I am trying to call it from npm scripts. I have the following config file: module.exports = { foo: proccess.argv[2] } So far, I have tried calling it via node config.js &apo ...

javascriptnode.js

The package name "node_modules" is invalid as it is on the blacklist of restricted names

Having trouble installing npm modules on the client side of my react app and encountering deployment issues with Heroku. The specific error message is: `npm ERR! code EINVALIDPACKAGENAME npm ERR! Invalid package name "node_modules": node_modules is a bla ...

node.jsreactjsnpmcreate-react-app

Angular: The Process of Completely Updating a Model Object

Within my application, there is an object named eventData which acts as a singleton and is injected into multiple controllers through a resolve function. This eventData contains various sets of data such as drop down list values along with the main model. ...

javascriptangularjs

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server

What are the methods for providing both successful and unsuccessful promises, with or without data?

Seeking guidance on how to return a promise and an object named output before or after the $http call in AngularJS, specifically using Typescript. How can I ensure it works correctly? topicNewSubmit = (): ng.IPromise<any> => { var self = t ...

javascriptangularjstypescript

No matter how many PHP syntax combinations I tried, I still can't seem to update

Before jumping to conclusions about the duplicate question, I want to clarify that this is my last attempt. I've tried all possible syntaxes and there seems to be no error, yet I am unable to update the table. I can insert data into the table without ...

phphtmlmysqlcss

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

javascriptjquerysvg