Can someone explain how to access a second styled component using '@mui/system' in order to add a hover effect to a parent element that will modify the max-height of its child?
Please keep in mind that I am referring to mui's styled component, not the standard styled-components version.
<Container>
<Inner />
</Container>
and
const Container = styled('div')(({ theme }) => ({
position: 'relative',
display: 'inline-block',
width: '270px',
height: '270px',
cursor: 'pointer',
//here I need to do something like
'&:hover Inner {
maxHeight: '270px',
}
//but I don't know the way to write this
}))
const Inner = styled('div')(({ theme }) => ({
position: 'absolute',
top: '0px',
left: '0px',
width: '100%',
height: '220px',
maxHeight: '0px',
backgroundColor: `${theme.palette.secondary.main}`,
transition: 'max-height 0.3s ease-out',
overflow: 'hidden',
}))