我有以下模态组件:
export default function LoginModal(props) {
const { showLogin, hideLogin } = props
if (!showLogin) return null
return (
<div class='overlay'>
<div class='modal'>
<article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'>
<div class='tc'>
<h1 class='f4'>Firstname Lastname</h1>
<hr class='mw3 bb bw1 b--black-10' />
</div>
<p class='lh-copy measure center f6 black-70'>
test test test test
</p>
</article>
</div>
</div>
)
}
我正在尝试使用存储在我的 redux 存储中的状态属性有条件地渲染它。但是,当我按如下方式放置它时:
<article class='pv6 center ph3 ph5-ns tc br2 bg-washed-green dark-green mb5'>
PAGE CONTENT HERE
</article>
<LoginModal />
它出现在屏幕其余内容的下方,而不是像我希望的那样位于其他所有内容之上。我正在使用以下 css 来尝试获得这种效果,但它似乎不起作用:
.overlay {
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: 'rgba(0,0,0,0.3)';
padding: 50;
z-index: 300;
}
.modal {
background-color: '#fff';
border-radius: 5;
max-width: 500;
min-height: 300;
margin: '0 auto';
padding: 30;
}
我需要模态显示为屏幕中央的登录卡,背景变暗,这在许多网站上都很常见。我也宁愿不使用一个UI组件库来实现。感谢您的帮助!
最佳答案
我认为您缺少一个 position: fixed
在你的.overlay
样式。
此外,您可能需要考虑使用 Portals在应用程序的 DOM 层次结构之外呈现模态,即在 <div id="app"></div>
之外或 <div id="root"></div>
我们常用。
为此,您的 index.html
或等效文件将包含以下内容:
<div id="app"></div>
<div id="modal"></div>
然后您需要更新您的 LoginModal
像这样:
export default function LoginModal(props) {
const { showLogin, hideLogin } = props;
if (!showLogin) return null;
return ReactDOM.createPortal((
<div class='overlay'>
<div class='modal'>
<article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'>
<div class='tc'>
<h1 class='f4'>Firstname Lastname</h1>
<hr class='mw3 bb bw1 b--black-10' />
</div>
<p class='lh-copy measure center f6 black-70'>
test test test test
</p>
</article>
</div>
</div>
), document.getElementById('modal'));
}
请注意,如果您尝试重用此示例中的代码来创建通用 Modal
组件,您一次只能显示一个,因为它们将在同一个 #modal
内呈现元素。
在Portals documentation您可以看到一个动态创建新元素的示例,这样您就可以同时拥有多个模式。
关于javascript - 无法在 React 中覆盖组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59482732/