React：在模态内模拟移动屏幕宽度

问题描述

我有一个带有桌面样式的组件

和移动样式，当浏览器宽度小于 750px 时发生

我想在一个 600 像素的模态中展示这个组件，但让该组件表现得好像浏览器宽度是 600 像素。当组件不在模态中呈现时，它应该表现正常，样式会根据浏览器的宽度进行调整，但是当组件在模态中呈现时，我希望它的行为就像屏幕宽度就是宽度一样的模态。

现在，该组件正在一个 600 像素宽的模态内采用桌面样式，如下所示，但我希望该组件采用上面的样式，这些圆圈堆叠在一列中。

---

Here is a repository of the code I have for this problem。 我想要做的唯一区别是，当圆圈出现在模态中时，它们应该堆叠在一起，但它们在“/其他”页面上的样式应该相同。

解决方法

您可以在内容组件中包含一个属性来相应地更改您的样式：

export default ({ insideModal }) => (
  <div className="d-flex flex-md-row flex-column"
   style={{ flexDirection: `${insideModal ? "column" : "row" }` }}
  >
    <Image />
    <Image />
    <Image />
  </div>
);

然后包含在你的 Modal 组件中：

const Modal = () => (
  <div
    style={{ width: 500,backgroundColor: "rgba(0,0.4)",top: "50%" }}
    className="position-fixed m-auto"
  >
    <Content insideModal />
  </div>
);