如何使用材质ui样式的构件从第一个构件访问第二个样式的构件

Question

使用样式自'@mui/system'访问第二个样式组件的格式是什么？我希望将鼠标悬停在父母身上，给孩子一些最大高度。

请注意，这是mui的样式组件，而不是标准样式组件版本。

<Container>
<Inner />
</Container>

和

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',
}))

Answer 1

如果其他人有这种情况，答案是给你的组件一个className并使用它：

<Inner className="inner" />
...
'&:hover': {
'& .inner': {
maxHeight: '270px',
},
},

Answer 2

我遇到了同样的问题，想添加一些额外的信息：

1. 确保组件代码和样式组件代码中的大小写相同。(className="Inner"和'&:hover .Inner'(

2. 我使用的是Typescript，只有当我这样写的时候，语法才能正常工作：

   '&:hover .Inner': {
   maxHeight: '270px',
   },