React设置CSS hover效果时布局错位、短暂出现黑色边框如何修复？

问题根因 #

• 布局偏移：默认W3C盒模型中，border 会被计入元素总宽高，你只在hover状态下新增1px边框，元素触发hover时总高度会瞬间增加2px（上下边框各1px），就会把下方内容向下挤压。
• 短暂黑色边框：两个原因导致，一是初始状态没有定义border属性，hover时浏览器会从默认border状态（默认颜色为黑色）过渡到你定义的灰色边框，出现中间黑色闪烁；二是你把transition属性写在了hover伪类里，只有鼠标移入时过渡生效，移出时没有过渡效果，也会加重闪烁感。

修复方案 #

方案1：默认状态加透明边框（最通用，适配所有场景）

预先给Box的默认样式设置1px透明边框，同时把transition挪到默认样式下，修改后的Box样式如下：

const Box = styled.div`
  padding: 9px 18px;
  cursor: pointer;
  display: inline-block;
  color: #222426;
  /* 预先设置透明边框，宽高提前把border算进去，不会出现布局偏移 */
  border: 1px solid transparent;
  /* transition放在默认状态，移入移出都有平滑过渡 */
  transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
  &:hover {
    border-color: #e2e6ea;
  }
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    color: #222426;
  }
`;

方案2：用outline替代border（不需要改变元素占位，适合不需要调整padding的场景）

outline不会被计入元素盒模型尺寸，不会触发布局偏移，修改方式如下：

const Box = styled.div`
  padding: 9px 18px;
  cursor: pointer;
  display: inline-block;
  color: #222426;
  transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
  &:hover {
    /* outline默认在元素外层，不占布局，不会导致偏移 */
    outline: 1px solid #e2e6ea;
  }
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    color: #222426;
  }
`;

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