Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each active page a unique color when it is focused. Here's the code snippet I'm currently working with:

<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
                sx={{
                  color:"black",
                  fontSize: 40,
                  cursor: "pointer",
                  "& :focus": {color:"blue"}
                }}
               />
cssmaterial-ui

Answer №1

Check out this codesandbox for some helpful tips.

To make it work on focus, you'll want to use the 'IconButton' component from MUI and apply styles within the IconButton itself.

Keep an eye out for the '&.Mui-focusVisible' property - that's the key to getting everything to come together.

Answer №2

To access pseudo-classes of the MUI icon, there is no need to include &. The :focus pseudo-class is typically used for <input/> elements, whereas :hover and :active are more suitable for your needs. You can implement these classes like this:

<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
     sx={{
        color:"black",
        fontSize: 40,
        cursor: "pointer",
        ":active": {color:"blue"},
        ":hover": {color:"blue"},
      }}
  />

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

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

htmlcss

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

While experimenting with the boilerplate template, I encountered an unusual issue when attempting to use TypeScript with the default NextJS configuration. The problem arose when changing the file extension from .js to .tsx / .tsx. Various versions of NextJ ...

csstypescriptnext.js

Using JQuery for sliding left without having to use inline CSS

I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...

jquerycssmedia-queriesslidetoggle

Steer clear of altering line spacing in CSS

Here is the HTML structure that I am working with: <div id="id1"> <h1>my name </h1><h3><a href="mailto:myemail_id"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff92869a929e9693969bbf878685d19 ...

htmlcss

Adjust the button's width as the text changes to create a dynamic animation

I'm trying to create an animation effect where the width of a button changes whenever the text inside it is updated. I've attempted using useRef on the button itself to grab its clientWidth and then applying that value to a CSS variable in order ...

javascripthtmlcssreactjs

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

When the parent element is centered, align the children to the left

Can children be aligned to the left when the parent is aligned to the center? I have a list of elements where the parent block should be centered, but the children need to align to the left. Now I found a solution to align the children to the center as w ...

css

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Guide to Deactivating the ENTER Key Functionality in React Material UI Autocomplete Form

My React component features a Material UI Autocomplete form that is working perfectly, except for one issue - when the user hits ENTER, the input field gets cleared. I simply want to prevent the input field from being cleared when ENTER key is pressed. Des ...

javascriptreactjsautocompletematerial-ui

Ensuring even distribution of three divs within a container

Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...

htmlcss

The visual appearance of the Material UI modal varies between the server (CI) and local environments

I am encountering an issue with a Jest/React testing library snapshot that fails on the server, but locally the snapshot does not update even when using the --ci option. The problem specifically involves a modal component from Material UI. import {Modal} ...

node.jsreactjsjestjsmaterial-uireact-testing-library

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

cssangularjs

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

Custom stylesheet for individual users?

On my website, users can pick a template for their webpage. After selecting a template, I would like them to have the ability to customize certain styles like the font color. Is there a way to achieve this? I was thinking about saving the user's cus ...

htmlcssasp-classic

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...

angularhtmlcss

Implement a hover effect on a specific class targeting a nested element using JavaScript

Is there a method to apply a class that modifies rules for a child element using Javascript? I have successfully added it with CSS but am struggling to do the same with Javascript. Removing the class in JS is easy by referencing the classname before the ho ...

javascriptcss

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

javascriptphphtmlcssmysql

Upon modifying the selection, I am notified to utilize the 'defaultValue' or 'value' props on the <select> tag, rather than applying 'selected' on the <option> tag

I am currently working with a material select component: <FormControl fullWidth variant="outlined" className={classes.formControl}> <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple"> Filial </InputLabel> <Sel ...

reactjsmaterial-uiformik