React项目如何正确导入应用CSS实现组件适配全屏视口

你遇到的问题本质是百分比高度的继承链路断裂，加上浏览器默认样式的影响，和CSS引入方式、元素挂载位置无关，可按以下步骤修复：

• 第一步：补全高度继承链路
  百分比高度要求元素的所有父级元素都显式设置高度才会生效，你只设置了body的100%高度，缺少html标签和React默认根容器#root的高度设置，同时浏览器默认给body添加了8px的外边距，就是你看到的顶部偏移的来源。
  在全局CSS中添加以下规则即可：

  html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* 统一盒模型，避免边框、内边距撑大容器尺寸 */
    box-sizing: border-box;
  }
  * {
    box-sizing: inherit;
  }
  

• 第二步：优化grid组件的高度适配逻辑
  不需要手动根据grid数量设置高度值，你可以给grid的直接父容器设置弹性布局规则：

  /* 存放grid组件的父容器样式 */
  .grid-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* 所有grid组件共用样式 */
  .grid-item {
    flex: 1;
  }
  

  这套规则下，不管父容器下有1个还是N个grid组件，都会自动平分整个视口高度，不需要额外调整样式。
• 第三步：优化CSS引入方式
  全局样式只需要在项目入口index.js中引入一次即可，不需要在每个组件中重复引入，重复引入不会导致功能异常，但会增加打包冗余体积。如果是组件的私有样式，才建议在组件内部单独引入对应的CSS文件。

你不需要把组件挂载到body下，只要补全从html到grid组件之间所有父级的高度设置，所有元素都可以正常继承视口高度规则，挂载到body下反而会带来事件冒泡、样式隔离的额外问题。

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