当使用 MUI 样式将鼠标悬停在父对象上时，如何更改子对象的样式? [英] How do you change a style of a child when hovering over a parent using MUI styles?
本文介绍了当使用 MUI 样式将鼠标悬停在父对象上时，如何更改子对象的样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在反应中使用 MUI.假设我有这些样式的组件:
const useStyles = makeStyles(theme => ({外层:{背景颜色:主题.调色板.灰色[200]，填充:theme.spacing(4)，'&:悬停': {光标:'指针'，背景颜色:主题.调色板.灰色[100]}},addIcon: (props: { dragActive: boolean }) =>({身高:50，宽度:50，颜色:主题.调色板.灰色[400]，marginBottom: theme.spacing(2)})}));函数应用程序(){常量类 = useStyles();返回 (<网格容器><网格项className={classes.outerDiv}><AddIcon className={classes.addIcon}/></网格></网格>);}当鼠标悬停在 outerDiv 上时，我想使用上述样式更改 addIcon 的样式.
相关文档和答案:
这是另一个 v5 示例，但使用 Emotion 的
styled函数而不是 Material-UI 的sx属性:从@mui/material/Grid"导入网格；从@mui/material/styles"导入 { createTheme, ThemeProvider }；从@mui/icons-material/Add"导入 AddIcon；从@emotion/styled/macro"导入样式；const StyledAddIcon = styled(AddIcon)(({ 主题 }) => ({高度:50px"，宽度:50px"，颜色:主题.调色板.灰色[400]，marginBottom: theme.spacing(2)}));const StyledGrid = styled(Grid)(({ 主题 }) => ({填充:theme.spacing(4)，背景颜色:主题.调色板.灰色[200]，&:悬停":{背景颜色:主题.调色板.灰色[100]，光标:指针"，[`${StyledAddIcon}`]: {颜色:紫色"；}}}));常量主题 = 创建主题()；导出默认函数 App() {返回 (<ThemeProvider 主题={主题}><网格容器><StyledGrid 项目><StyledAddIcon/></StyledGrid></网格></主题提供者>);}还有一个使用 Emotion 的 css prop 的 v5 示例:
/** @jsxImportSource @emotion/react */从@mui/material/Grid"导入网格；从@mui/material/styles"导入 { createTheme, ThemeProvider }；从@mui/icons-material/Add"导入 AddIcon；常量主题 = 创建主题()；导出默认函数 App() {返回 (<ThemeProvider 主题={主题}><网格容器><网格物品css={(主题) =>({填充:theme.spacing(4)，背景颜色:主题.调色板.灰色[200]，&:悬停":{背景颜色:主题.调色板.灰色[100]，光标:指针"，"&.addIcon": {颜色:紫色"；}}})}><添加图标className="addIcon";css={(主题) =>({高度:50px"，宽度:50px"，颜色:主题.调色板.灰色[400]，marginBottom: theme.spacing(2)})}/></网格></网格></主题提供者>);}I'm using MUI in react. Let's say I have this component with these styles:
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> ); }I want to change the style of
addIconwhen hovering overouterDivusing the styles above.Here's my example.
解决方案Below is an example of the correct syntax for v4 (
"& $addIcon"nested within&:hover). Further down are some v5 examples.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);Related documentation and answers:
- https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
- how to use css in JS for nested hover styles, Material UI
- Material UI: affect children based on class
- Advanced styling in material-ui
For those who have started using Material-UI v5, the example below implements the same styles but leveraging the new
sxprop.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" } } }} > <AddIcon className="addIcon" sx={{ height: "50px", width: "50px", color: theme.palette.grey[400], mb: 2 }} /> </Grid> </Grid> ); }
Here's another v5 example, but using Emotion's
styledfunction rather than Material-UI'ssxprop:import Grid from "@mui/material/Grid"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import AddIcon from "@mui/icons-material/Add"; import styled from "@emotion/styled/macro"; const StyledAddIcon = styled(AddIcon)(({ theme }) => ({ height: "50px", width: "50px", color: theme.palette.grey[400], marginBottom: theme.spacing(2) })); const StyledGrid = styled(Grid)(({ theme }) => ({ padding: theme.spacing(4), backgroundColor: theme.palette.grey[200], "&:hover": { backgroundColor: theme.palette.grey[100], cursor: "pointer", [`${StyledAddIcon}`]: { color: "purple" } } })); const theme = createTheme(); export default function App() { return ( <ThemeProvider theme={theme}> <Grid container> <StyledGrid item> <StyledAddIcon /> </StyledGrid> </Grid> </ThemeProvider> ); }
And one more v5 example using Emotion's css prop:
/** @jsxImportSource @emotion/react */ import Grid from "@mui/material/Grid"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import AddIcon from "@mui/icons-material/Add"; const theme = createTheme(); export default function App() { return ( <ThemeProvider theme={theme}> <Grid container> <Grid item css={(theme) => ({ padding: theme.spacing(4), backgroundColor: theme.palette.grey[200], "&:hover": { backgroundColor: theme.palette.grey[100], cursor: "pointer", "& .addIcon": { color: "purple" } } })} > <AddIcon className="addIcon" css={(theme) => ({ height: "50px", width: "50px", color: theme.palette.grey[400], marginBottom: theme.spacing(2) })} /> </Grid> </Grid> </ThemeProvider> ); }这篇关于当使用 MUI 样式将鼠标悬停在父对象上时，如何更改子对象的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
