react css hoverした時にレイアウトが少し崩れてしまう。

Question

box1をhoverしたらborderを表示したいです。
hoverした時にborderが表示されるのですが一瞬黒色のborderが表示されてしまいます。
またhoverした時に下にレイアウトがずれてしまいます。
修正方法わかる人いましたらご教授お願いしたいです。

codesandbox

import "./styles.css";
import styled from "styled-components";

const Box = styled.div`
  padding: 9px 18px;
  cursor: pointer;
  display: inline-block;
  color: #222426;
  &:hover {
    border: solid #e2e6ea 1px;
    transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
  }
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    color: #222426;
  }
`;

const App = () => {
  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <Box>
        <span>box1</span>
      </Box>
      <div>
        <span>aaaaaaa</span>
      </div>
      <div style={{ width: "full", height: "100px", background: "red" }}></div>
    </>
  );
};

export default App;

Answer 1

hoverしたときにBoxのborderが0から1pxに変わるので、その差分です。
最初から透明なborderを付けておくことで解決するかと。

const Box = styled.div`
  padding: 9px 18px;
  cursor: pointer;
  display: inline-block;
  color: #222426;
　border: solid transparent 1px;　←追加

Comments

[enokia]

ありがとうございます。