Javascript 如何设置网格项大小材质UI更改的动画

我有一个项目与反应和材料的用户界面

我需要一些关于如何设置网格项大小更改动画的指导。默认情况下，该项为sm={3}，当用户悬停该项时，该项将更改为sm={6}。这是通过偶数触发器和状态变量实现的。我的问题是如何为此创建过渡/动画

我尝试将此添加到css项中，但没有成功

transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.easeIn,
    duration: theme.transitions.duration.sta
})

---

您应该设置“缓入”和“缓出”的动画，以便过渡到工作状态， 尝试使用css

.item {
   transition: all .5s ease-in-out;
}
.item:hover {
   transition: all .5s ease-in-out;
}

---

我知道这个问题已经问了三个月了，但我也遇到了同样的问题，即基于状态变量在React和Material UI中设置网格大小更改的动画。当一个边栏展开和缩回时，我正在为主页内容做一个平滑调整的过渡。我用网格元素的内联样式实现了这一点

我的代码：

<Grid container>
  <Grid 
    item xs={this.state.expandMainContent === true ? 1 : 2}
    style={{transition: theme.transitions.create("all", {
          easing: theme.transitions.easing.sharp, 
          duration: theme.transitions.duration.leavingScreen,
  })}} >
    <Sidebar />
  </Grid>
  <Grid 
    item xs={this.state.expandMainContent === true ? 11 : 10} 
    style={{transition: theme.transitions.create("all", {
          easing: theme.transitions.easing.sharp, 
          duration: theme.transitions.duration.leavingScreen
   })}}>
     <MainContent />
  </Grid>
</Grid>

---

我在单击时做了我的操作，而您的操作处于悬停状态，但应该仍然可以正常工作。

我正在使用onMouseEnter和onmouseeve。那个代码对那个不起作用，请分享代码沙盒