如何使用MUI的styled实现Hover时缩放当前组件并缩小其他组件？

可以通过styled-components结合父容器的样式控制来实现这个效果，核心是利用父容器hover状态下的子元素样式规则，配合CSS的:not(:hover)选择器区分当前hover的组件和其他组件。

步骤1：创建父容器组件 #

给四个MyComponent套一个父容器，用来统一管理hover状态下的子组件样式：

const Container = styled('div')(({ theme }) => ({
  display: 'flex', // 根据布局需求调整，比如横向排列用flex，纵向用block
  gap: theme.spacing(2), // 可选，调整组件间间距
  width: '100%', // 确保父容器覆盖所有子组件的hover范围
}));

步骤2：修改MyComponent的样式 #

调整原有hover逻辑，加入过渡动画让效果更流畅：

const MyComponent = styled('div')(({ theme }) => ({
  // 保留你的原有基础样式
  // ... some styles

  // 添加过渡动画，避免缩放效果突兀
  transition: 'transform 0.3s ease-in-out',
  
  // 父容器内未被hover的子组件统一缩小
  '&:not(:hover)': {
    transform: 'scale(0.8)', // 缩小比例可按需调整
  },
  
  // 当前被hover的组件放大
  '&:hover': {
    transform: 'scale(1.2)',
    marginRight: '20px', // 保留你原本的margin需求
  },
}));

步骤3：组件使用方式 #

将四个MyComponent放入父容器中：

<Container>
  <MyComponent>some images...</MyComponent>
  <MyComponent>some images...</MyComponent>
  <MyComponent>some images...</MyComponent>
  <MyComponent>some images...</MyComponent>
</Container>

原理说明 #

当鼠标悬停在任意一个MyComponent上时，父容器Container也会处于hover状态，此时所有子MyComponent都会触发:not(:hover)的缩小样式，唯独当前被hover的组件会优先应用自身的:hover放大样式，最终实现“hover组件放大，其余组件缩小”的交互效果。

内容的提问来源于stack exchange，提问作者Leo