如何在语义-UI-React中居中模态？

Question

我是Semantic-UI-React框架的新手,最近遇到了一个我似乎无法解决的问题.我在我的主页上有一个登录和注册模式.触发"登录和注册"按钮后,弹出"模态".但是,我不能让它出现在页面的中心.它位于页面顶部,部分切断.我该怎么做呢？预先感谢您的帮助!

Answer 1

<div>包含模态对话框的外部display: block;而不是flex导致错位.更具体地讲,定义display: flex的.dimmed.dimmable > .ui.visible.dimmer是由于某种原因,通过重写display: block !important所规定.visible.transition.

您可能希望将以下内容添加到CSS中以解决此问题:

.dimmed.dimmable > .ui.modals.dimmer.visible {
  display: flex !important;
}

或者,如果您使用的是css模块:

:global(.dimmed.dimmable > .ui.modals.dimmer.visible) {
  display: flex !important;
}

Answer 2

几个月前我在学习 react 时遇到了这个问题，这就是我对这个问题进行排序的方式。 在 App.js 文件夹下的我的 .css 文件中，只需添加：

.modal {
    height: auto;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}

希望它有帮助。干杯

Answer 3

目前 SUI 中的模式存在问题，请查看此问题https://github.com/Semantic-Org/Semantic-UI/issues/6185