使用material-ui jss样式将鼠标悬停在父项上时如何更改子项的样式
发布于 2021-01-31 23:03:07
我在反应中使用Material-ui。假设我有这些样式的组件
const useStyles = makeStyles(theme => ({
outerDiv: {
backgroundColor: theme.palette.grey[200],
padding: theme.spacing(4),
'&:hover': {
cursor: 'pointer',
backgroundColor: theme.palette.grey[100]
}
},
addIcon: (props: { dragActive: boolean }) => ({
height: 50,
width: 50,
color: theme.palette.grey[400],
marginBottom: theme.spacing(2)
})
}));
function App() {
const classes = useStyles();
return (
<Grid container>
<Grid item className={classes.outerDiv}>
<AddIcon className={classes.addIcon} />
</Grid>
</Grid>
);
}
当我使用上述样式将鼠标悬停在externalDiv上时,我想更改addIcon的样式。
这是我的示例:https :
//codesandbox.io/s/trusting-
mcnulty-b1gcd?fontsize=14&hidenavigation=1&theme=dark
关注者
0
被浏览
102
1 个回答
-
以下是正确语法的示例(
"& $addIcon"
嵌套在中&:hover
)。import * as React from "react"; import { render } from "react-dom"; import { Grid, makeStyles } from "@material-ui/core"; import AddIcon from "@material-ui/icons/Add"; const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.grey[100], "& $addIcon": { color: "purple" } } }, addIcon: (props: { dragActive: boolean }) => ({ height: 50, width: 50, color: theme.palette.grey[400], marginBottom: theme.spacing(2) }) })); function App() { const classes = useStyles(); return ( <Grid container> <Grid item className={classes.outerDiv}> <AddIcon className={classes.addIcon} /> </Grid> </Grid> ); } const rootElement = document.getElementById("root"); render(<App />, rootElement);