JavaScript转React后<nav>标签宽度不一致问题咨询

将JavaScript代码迁移至React项目后，HTML结构与CSS样式未做改动，但<nav>标签宽度出现差异，右侧第二个按钮被屏幕截断。开发者工具显示，JS环境下该标签宽度为1476px，React环境下为1920px。为何CSS设置完全相同会出现这种差异？

截图对比 #

• JS环境下的导航栏：
  
• React环境下的导航栏：
  

JavaScript代码 #

index.html #

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="main">
      <div data-scroll data-scroll-speed="-5" id="page1">
        <nav>
          <img src="../asset/Screenshot.png" alt="Screenshot" />
          <div id="right-nav">
            <button>Book a Demo</button>
            <button>
              <i class="ri-menu-line"></i>
            </button>
          </div>
        </nav>
        <video
          src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2"
          autoplay
          loop
          muted
        ></video>
      </div>
    </div>
  </body>
</html>

style.css #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

@font-face {
  font-family: a;
  src: url(../asset/jost-variable.ttf);
}

@font-face {
  font-family: b;
  src: url(../asset/KFOlCnqEu92Fr1MmEU9fBBc4.ttf);
}

@font-face {
  font-family: c;
  src: url(../asset/KFOmCnqEu92Fr1Mu4mxK.ttf);
}

#main {
  position: relative;
  overflow: hidden;
  background-color: #1137ca;
}

#page1 {
  height: 100vh;
  width: 100vw;
  position: relative;
}
#page1 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#page1 > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  position: absolute;
  height: 10vh;
  width: 100vw;
}
#page1 > nav > img {
  margin-top: -1.7vw;
  width: 9%;
}
#right-nav > button {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #0b48ed;
  border: 1px solid #fff;
  color: #fff;
  font-family: a;
  font-size: 15px;
}
.bottom-page1 {
  position: absolute;
  bottom: 5%;
  height: 35vh;
  width: 50vw;
  left: 10%;
}
.bottom-page1 > h1 {
  font-family: a;
  font-size: 5vw;
  font-weight: 100;
  line-height: 1;
  color: #fff;
}
.bottom-page1-inner {
  position: absolute;
  bottom: 0%;
  height: 35%;
  width: 100%;
}
.bottom-page1-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: a;
}
.bottom-page1-inner > button {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  background-color: #fff;
  color: #0b48ed;
  font-size: 16px;
  font-family: b;
}
.bottom-page1-inner > h4 {
  font-size: 1.3vw;
  font-weight: 100;
  color: #fff;
}

React代码 #

App.jsx #

import React from "react";
import { GlobalStyle, Wrap } from "./styles";
import "remixicon/fonts/remixicon.css";

const App = () => {
  return (
    <>
      <GlobalStyle />
      <Wrap>
        <div id="main">
          <div id="page1">
            <nav>
              <img src="../asset/Screenshot.png" alt="Screenshot" />
              <div id="right-nav">
                <button>Book a Demo</button>
                <button>
                  <i className="ri-menu-line"></i>
                </button>
              </div>
            </nav>
            <video
              src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2"
              autoPlay
              loop
              muted
            ></video>
          </div>
        </div>
      </Wrap>
    </>
  );
};

export default App;

styles.jsx #

import styled, { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
`;

export const Wrap = styled.div`
  height: 100%;
  width: 100%;

  #main {
    position: relative;
    overflow: hidden;
    background-color: #1137ca;

    #page1 {
      height: 100vh;
      width: 100vw;
      position: relative;

      nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        height: 10vh;
        width: 100vw;
        padding: 0px 30px;

        img {
          margin-top: -1.7vw;
          width: 9%;
        }

        #right-nav {
          button {
            padding: 10px 20px;
            border-radius: 50px;
            background-color: #0b48ed;
            border: 1px solid #fff;
            color: #fff;
            font-family: a;
            font-size: 15px;
          }
        }
      }

      video {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  }
`;

问题原因分析 #

1. 全局样式覆盖不全
   JS版本中用*选择器给所有元素设置了margin:0; padding:0; box-sizing:border-box;，但React版本的GlobalStyle没有指定选择器，仅写了样式属性，相当于只作用于全局样式的根节点，未覆盖所有元素。浏览器默认的body边距会导致布局偏移，nav的width:100vw加上padding后超出视口。

2. 根元素尺寸未设置
   JS版本明确给html、body设置了height:100%; width:100%;，确保页面容器充满视口；React版本未做此设置，Wrap容器的尺寸会受父元素默认样式影响，间接导致nav的宽度计算异常。

3. 字体资源缺失
   JS版本定义了三个自定义字体，但React的styles.jsx中未引入这些字体，按钮文字使用浏览器默认字体，可能改变元素宽度，引发布局错位。

修复方案 #

1. 修正GlobalStyle，补全全局样式和字体定义：

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html, body {
    height: 100%;
    width: 100%;
  }
  @font-face {
    font-family: a;
    src: url(../asset/jost-variable.ttf);
  }
  @font-face {
    font-family: b;
    src: url(../asset/KFOlCnqEu92Fr1MmEU9fBBc4.ttf);
  }
  @font-face {
    font-family: c;
    src: url(../asset/KFOmCnqEu92Fr1Mu4mxK.ttf);
  }
`;

2. 确保Wrap容器的父元素（body）无默认边距，上述GlobalStyle已解决此问题。
3. 验证nav元素的box-sizing:border-box生效，保证padding不会增加元素总宽度。

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