React结合Material-UI开发时为按钮动画添加padding抵消尺寸变动的方法

完全可以通过额外包裹层或者直接调整样式抵消悬停尺寸变化的效果，以下是两种可落地的实现方案：

方案1：新增外层div预留空间（不改动原有按钮逻辑） #

原理：给按钮外层套一个固定宽高的容器，宽高提前设置为按钮悬停后的最大尺寸，内部按钮始终居中对齐，悬停时尺寸变化只会在容器内部发生，不会影响外层布局。

代码示例 #

React组件修改：

<Box m={3}>
  <div id="activate-description">
    <h4 className='activate-text'>test</h4>
    <Link to='activate'>
      {/* 新增外层包裹div */}
      <div className="activate-btn-wrapper">
        <button className='activate'>Activate</button>
      </div>
    </Link>
  </div>
</Box>

对应CSS：

.activate-btn-wrapper {
  /* 数值替换为你按钮悬停后的实际宽高，可通过浏览器开发者工具测量 */
  width: 180px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

方案2：直接调整按钮样式避免尺寸变化（无需新增DOM层，更简洁） #

你遇到的悬停尺寸增加1px的问题，通常是MUI默认按钮的悬停样式新增了边框、或者修改了边框宽度导致的，直接调整按钮样式就可以从根源解决问题：

代码示例 #

/* 方法A：默认状态预留透明边框，悬停只改边框颜色，尺寸无变化 */
.activate {
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.activate:hover {
  /* 替换为你实际需要的悬停边框色 */
  border-color: #1976d2;
  /* 去掉原有会导致尺寸变化的样式，比如额外的padding、border-width调整 */
}

/* 方法B：用不占文档流的box-shadow模拟边框效果，完全不会触发尺寸变化 */
.activate:hover {
  box-shadow: 0 0 0 1px #1976d2;
}

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