如何解决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>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。