css - React：在模态框内模拟手机屏幕宽度

Question

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

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

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

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

---

这是我为这个问题所拥有的代码库。我想要做的唯一区别是当圆圈出现在模态框内时应该堆叠它们，但它们应该在“/其他”页面上以相同的方式设置样式。

Answer 1

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

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,0,0.4)", top: "50%" }}
    className="position-fixed m-auto"
  >
    <Content insideModal />
  </div>
);