编辑 MUI 图标的 css 属性

Question

有人可以帮助我如何更改 mui 图标的 css 属性，以便我可以在图标处于焦点时分配特定的颜色...我已经使用了 header 中的图标并在它们下面渲染特定页面以便区分哪个页面是目前活跃我想在焦点上分配不同的颜色。 这是我的代码-

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

Answer 1

我认为这个 codesandbox会对你有用。

您应该使用 MUI 中的“IconButton”组件来包装图标。 并在 IconButton 中应用 styles 使其在焦点上工作。

基本上，该属性称为“&.Mui-focusVisible”。

Answer 2

首先，您无需添加&即可访问 MUI 图标的伪类。 其次，我认为:focus伪类主要用于<input/>元素。 您正在寻找的是:hover或:active 。 您可以通过这种方式尝试这些课程

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