Editing css properties of MUI Icons-CodePudding

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"}
                }}
               />

CodePudding user response：

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'.

CodePudding user response：

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"},
      }}
  />