React 和垂直响应式设计

Question

伙计们。这个让我难住了。我浏览了几篇文章，似乎找不到完全相同的问题。我正在创建一个模仿 Windows 或 Mac 或 Linux 桌面 UI 的 React 应用程序。换句话说，我不想在网络浏览器中弹出正常的垂直（或水平）滚动条。我在 Whosebug 上找到了一个很好的例子，说明如何在 CSS 和 flexbox 中完成此操作。

html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted #0313fc;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
  overflow: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}


img {
  height: 95%;
  width: 95%;
  object-fit: contain;
}

上面的 CSS 在 vanilla HTML/CSS 文件中完美运行。当我垂直调整浏览器 window 大小时，其中的元素是响应式的。当我在样板 create-react-app 中做完全相同的事情时，它失败了。页面响应水平但不是垂直。我删除了所有额外的 css 文件（如 App.css），并将上面的内容转储到我首先清除的 index.css 文件中。

查看 Chrome 浏览器 window 中的样式，所有样式看起来都与香草 HTML 中的样式相同。我不确定为什么浏览器在这个 React 项目的垂直方向上没有响应。恐怕它是 webpack 中的东西或引擎盖下的其他东西。

如果有人对此有任何想法，我会洗耳恭听。谢谢！！！

Answer 1

当然，在我问了这个之后，我找到了解决办法。在使用 React 这么多年之后，我忘记了它会将索引 HTML 中的代码注入到 id="root" 的 div 中。一旦我将“框”CSS class 应用于该元素，它就按预期工作了！那么现在的问题是：有没有办法通过 React 将这个 class 注入到 HTML 中？ :)

React 和垂直响应式设计

React and Vertical Responsive Design

html

css

reactjs

responsiveness