React项目中悬停添加下边框导致Material UI图标缩小如何修复

问题原因分析 #

• 下边框距离图标过近：你直接将border-bottom加在svg元素上，默认没有预留内边距，边框会紧贴图标底部
• hover时图标缩小/变形：默认状态下没有边框，hover时新增4px边框会突然改变元素总高度，触发布局挤压，导致图标视觉上变小变形

修复后的CSS代码 #

你只需要修改.header__rightContainer svg和对应的hover样式即可，修改后完整CSS如下：

.header {
  width: 100%;
  background: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__leftContainer,
.header__rightContainer {
  padding: 15px 40px;
}

.header__leftContainer h1 {
  color: red;
}

.header__rightContainer svg {
  font-size: 1.6rem;
  margin: 0 15px;
  cursor: pointer;
  /* 预留底部内边距，拉开图标和边框的距离，可根据需要调整数值 */
  padding-bottom: 8px;
  /* 默认设置透明下边框提前占位，避免hover时尺寸变化 */
  border-bottom: 4px solid transparent;
}

.header__rightContainer svg:last-child {
  margin: 0 !important;
}

.header__rightContainer svg:hover {
  /* 仅修改边框颜色，不改动元素尺寸，不会触发布局偏移 */
  border-bottom-color: blue;
}

补充说明 #

如果需要调整边框和图标之间的距离，直接修改padding-bottom的数值即可，不会影响图标本身的1.6rem字号大小。

内容的提问来源于stack exchange，提问作者s.khan