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

Navigating between TextFields using InputAdornments in Material UI with tab functionality

Is there a way to prevent the "focus" event from occurring on input adornments of MaterialUI Text Fields? I have two fields with input adornments and I want to switch between them using just a single Tab press, without focusing on the input adornment. Is ...

reactjsmaterial-ui

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

javascripthtmlcssflexbox

Persistent footer text moving around

Check out the sticky header I created here. However, when it sticks in place, the text moves down and goes out of the container. I want the header to remain within the container. Here is my HTML & jQuery: <div id="container"> <div id="menu ...

htmlcss

Change the color of the `floatingLabelStyle` when the <TextField> is in focus

Is there a way to change the color of the floating label in material-ui's <TextField> component only when it is in the focused state? I've tried setting the color in the floatingLabelStyle property, but it seems to apply that color whether ...

material-ui

Differences between FormControlLabel and InputLabel in Material UI

Can you explain the distinction in purpose and behavior between a FormControlLabel and an InputLabel within Material-UI (React) version 4 or later? ...

material-ui

IE11 Experiencing Overflow Issue with List Item Pseudo Element Numbers

Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11. Here is the HTML code: <ul> < ...

cssinternet-explorerinternet-explorer-11

Tips for maintaining consistent width of a div:

My current project involves designing a website that displays various quotes, with each quote rotating for a specific amount of time. However, I'm facing an issue where upon loading the page, the first quote triggers the appearance of a scrollbar, mak ...

javascripthtmlcss

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

htmlcss

To ensure the specificity selector for material UI in React, it is essential to include an empty CSS definition

The styling for the unselected toggle button is working smoothly. However, when you don't define an empty class selector, the style of the selected toggle button does not show: ./App.js import * as React from "react"; { render ...

reactjstypescriptmaterial-uijss

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8

I have successfully implemented a tab menu that functions well in Chrome and IE 9,10. However, it does not seem to work in IE 7 or 8. I am at a loss regarding what changes need to be made to my code. Could anyone provide assistance? Link to Code Example ...

jquerycsscross-browser

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

csshtmlmodernizr

Is it feasible to utilize a CSS variable within a CSS "background URL" property?

Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried: In global.css: :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } In s1.css: @import url("global.css"); body { background-co ...

cssbackground-imagecss-variablescss-import

Strategies for optimizing PPI and DPI in responsive design

Imagine having two monitors: one 15.5 inches with a resolution of 1920 x 1080 and the other 24 inches with the same resolution. The first monitor has a pixel density of around 72 PPI, while the second has around 90 PPI. If I apply a media query in CSS for ...

javascripthtmlcss

The Material-ui Select component is experiencing issues with updating the state accurately

When creating a multiple select input using Material-UI, I encountered an issue with setting the default selected values from state. Despite having an array of two objects in the state and setting it as the select value, the default objects are not being ...

javascriptreactjsreact-hooksmaterial-ui

Display or conceal a field based on the content of another field using jQuery

Is there a way to hide or show a field on my website based on the value in the shopping cart? I've created a function for this, but I'm struggling with the condition. Can you help me figure out how to write it correctly? <script> $(docume ...

htmljquerycss

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

javascriptjqueryhtmlcssapi

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

What are some ways to adjust ESlint's strictness when using Prettier in a React project that utilizes Material-UI?

Update I made some changes to the .eslintc file in my client app's root directory. I added a JS Object with an "extends" attribute defined as "react-app" and included the "prettier" plugin in the "plugins" array. { "extends": "react-app", " ...

reactjsmaterial-uieslintprettier

Diverse Values within the Inner Border

Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...

css