Question 45656 in CSS Question posted in
Some basic documentation can be found here.

Editing css properties of MUI Icons

Can somebody help me how to change the css property of mui icons so that i can assign a perticular color when the icon is on focus…I have used the icons in header and am rendering specific pages under them so for differentiating which page is currently active i want to assign different color on focus.
Here is my code-

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

2

Answers


  1. 0

    I think this codesandbox will be useful to you.

    You should use the ‘IconButton’ component from MUI to wrap the Icon. And apply the styles in the IconButton to make it work on focus.

    Basically, the property is called ‘&.Mui-focusVisible’.

    Login or Signup to reply.
  2. 0

    First, you don’t need to add & to access pseudo-classes of the MUI icon. Second, I think :focus pseudo-class is mainly used for <input/> elements. What you are looking for is either :hover or :active.
    You can try these classes this way

    <PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
     sx={{
        color:"black",
        fontSize: 40,
        cursor: "pointer",
        ":active": {color:"blue"},
        ":hover": {color:"blue"},
      }}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search