我正在使用React 17.0.2。
我有一些代码：

import React from "react";
import logo from "./white_lotus.jpeg";

import "./test.css";
function Header() {
  return (
    <div className="header">
      <div className="header-left">
        <div className="header-logo-link">
        <img
              className="header-logo"
              src={logo}
              alt=""
            />
        </div>
      </div>

    </div>
  );
}

export default Header;

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid lightgray;
}

.header-left{
  margin-left: 2%;
  justify-content: space-between;
  display: flex;
  width: 50px;
  height: inherit;
  align-items: center;
  background-color: red ;
}

.header-logo {
  height: 20px;
}

当在两个不同的文件中渲染时，会产生不同的输出。在一个文件中，它产生了这样的输出：

其中logo和关联的div被拉伸。我在 App 文件本身中渲染了这个：

function App() {
  return (
    <div className="app">
      <Header />
    </div>
  );
}

export default App;

当我尝试在新 create-react-app 中尝试时，它渲染得非常好：

我不知道为什么这是这样。是否有任何缓存会影响一个应用程序和另一个应用程序之间的渲染？