无法在 React 中覆盖组件

Question

我有以下模态组件：

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 组件库来实现。感谢您的帮助！

Answer 1

我认为您的.overlay风格中缺少position: fixed。

此外，你可能还需要考虑使用门户在应用的 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元素中呈现。

在门户文档中，您可以看到一个动态创建新元素的示例，以便您可以同时拥有多个模态。