如何将子元素隐藏为默认元素，并在用户使用material ui(react.js)覆盖父元素时显示它

Question

我希望默认情况下隐藏一个子元素，当用户将鼠标悬停在父元素上时，显示带有样式的子元素。

我如何使用材料ui来做到这一点？

import Grid from "@mui/material/Grid";
import { useTheme } from "@mui/material/styles";
import AddIcon from "@mui/icons-material/Add";
export default function App() {
const theme = useTheme();
return (
<Grid container>
<Grid
item
sx={{
p: 4,
backgroundColor: theme.palette.grey[200],
"&:hover": {
backgroundColor: theme.palette.grey[100],
cursor: "pointer",
"& .addIcon": {
color: "purple",
opacity: 1
}
}
}}
>
<AddIcon
className="addIcon"
sx={{
height: "50px",
width: "50px",
color: theme.palette.grey[400],
mb: 2,
opacity:0
}}
/>
</Grid>
</Grid>
);
}

我不能覆盖/应用相同的属性吗？对于这种情况CCD_ 1。

当它悬停时，我试图从opacity: 1切换到opacity:'inherit'或其他属性，但没有成功。

Answer 1

您是否尝试过使用；显示"；所有物

import { useTheme } from "@mui/material/styles";
import AddIcon from "@mui/icons-material/Add";
export default function App() {
const theme = useTheme();
return (
<Grid container>
<Grid
item
sx={{
p: 4,
backgroundColor: theme.palette.grey[200],
"&:hover": {
backgroundColor: theme.palette.grey[100],
cursor: "pointer",
"& .addIcon": {
color: "purple",
display: "block"
}
}
}}
>
<AddIcon
className="addIcon"
sx={{
height: "50px",
width: "50px",
color: theme.palette.grey[400],
mb: 2,
display:"none"
}}
/>
</Grid>
</Grid>
);
}