在 Material-UI 中没有获得 ThumbUpAltIcon 中轮廓按钮的功能？

Question

我希望在第一张图片中添加按钮，当有人喜欢 post 时，在后面的图片中添加按钮，当有人不喜欢 post 时，它应该是这样工作的，但我在这两种情况下都获得第一个图像按钮。请指导我，这将是一个很大的帮助

Answer 1

MUI 图标有多种变体供您选择。您可以从 here.

中搜索您喜欢的图标和 select 变体

根据屏幕截图，您很可能需要禁用状态的轮廓变体和启用状态的填充变体：

import IconButton from "@mui/material/IconButton";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import ThumbUpAltOutlinedIcon from "@mui/icons-material/ThumbUpAltOutlined";

const [like, setLike] = React.useState(false);

return (
  <IconButton color="primary" onClick={() => setLike((x) => !x)}>
    {like ? <ThumbUpIcon /> : <ThumbUpAltOutlinedIcon />}
  </IconButton>
);

在 Material-UI 中没有获得 ThumbUpAltIcon 中轮廓按钮的功能？

Not getting the functionality of outlined button in ThumbUpAltIcon in Material-UI?

reactjs

material-ui

mern

现场演示