Javascript 无法在React中覆盖组件

我有以下模态组件：

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>
    )
}

---

我需要的模式显示为一个登录卡在屏幕中央与背景暗淡，这是常见的许多网站。我也不希望使用UI组件库来实现。谢谢你的帮助

我认为你在你的

.overlay

样式中缺少了一个

位置：fixed

此外，您可能需要考虑在您的应用程序的DOM层次结构之外使用模态，即，在<代码> <代码>或<代码> <代码>下，我们通常使用.< 为此，您的

index.html

或等效文件将具有如下内容：

<div id="app"></div>
<div id="modal"></div>

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

元素中进行渲染

---

在中，您可以看到一个动态创建新元素的示例，这样您就可以同时拥有多个模态。

因此，您关于CSS修复的建议非常有效，但是，正如您所述，我尝试使用门户渲染我的模态，但由于某些原因，它没有出现在屏幕上。您是否知道为什么会出现这种情况？您作为root使用的元素是否确实存在于页面上？在本例中，它将是

document.getElementById（'modal'）

，因此需要一个具有

id=“modal”

的元素才能工作。你有什么错误吗？话虽如此，代码中的主要问题是缺少

位置：修复了
，因此如果应用程序不太复杂，您可能不需要使用门户。
<div id="app"></div>
<div id="modal"></div>

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'));

}