无法将使用React Portal和Tailwind CSS的`@headlessui/react`中的` `Dialog/Modal`居中？
要将使用React Portal和Tailwind CSS的@headlessui/react中的Dialog/Modal居中，可以按照以下步骤进行操作：
- 首先，确保你已经正确安装了React Portal和Tailwind CSS，并且已经引入了
@headlessui/react库。 - 在你的代码中，找到
Dialog/Modal组件的父容器元素，通常是一个div元素。 - 给这个父容器元素添加一个CSS类名，比如
center-modal。 - 在你的CSS文件或者样式模块中，定义
center-modal类的样式，使其居中显示。可以使用Flexbox布局或者Grid布局来实现居中。- Flexbox布局方式：
- Flexbox布局方式：
- Grid布局方式：
- Grid布局方式：
- 重新运行你的应用程序，
Dialog/Modal组件应该会居中显示在页面上了。
对于@headlessui/react中的Dialog/Modal组件的更多信息，你可以参考腾讯云的相关产品文档：
- 腾讯云产品：云开发（Serverless Cloud Function）
- 产品介绍链接地址：https://cloud.tencent.com/product/scf
请注意，以上答案仅供参考，具体实现方式可能因你的项目配置和需求而有所不同。
相关·内容
我想让它像上的第一个模式一样居中这是React Portal的问题吗？Modal.tsximport { Dialog } from "@headlessui</em
浏览 12提问于2021-03-12得票数 2
回答已采纳
我在构建和导出我的TailwindCSS和NextJS项目时遇到了困难。在使用npm run dev时，这个项目工作得很好，我能够使用所有的Tailwind类。当我运行npm run build && npm run export时，所有的尾风CSS样式都消失了，生成的index.html文件没有任何CSS样式。build src/styles/index.css -o src/style
浏览 5提问于2021-07-31得票数 2
我正试图使用SPFX web部件来实现这一点：-
web部件将呈现一个Button，并在其设置中有一个文本字段。用户添加Web部件>>，编辑它>>，输入文本字段中的文本(在设置页面内)，保存web part>>，然后web部件将呈现一个按钮>>，如果用户单击该按钮，弹出窗口将与输入的文本一起显示。现在我找到了这个链接@ ，它几乎实现了我正在寻找的东西，只是示例中的弹出式文本是在.ts
浏览 4提问于2021-11-06得票数 0
1回答
当我试图创建一个包含组件的React组件'LoadingModal‘的Jest快照时，快照最终为空，.snap文件中为'null’。我测试了其他语义-UI反应组件的快照，如'Button‘、’下拉‘和'Sidebar'，这些组件使用正确的html输出呈现和快照都很好。这看起来不像是Jest快照本身的问题，而是，它的.create()和</em
浏览 0提问于2018-01-22得票数 7
回答已采纳
1回答
我创建了一个插件并添加了对它的响应(使用@wordpress/script)。我尝试使用@wordpress/脚本实现react，并创建React。我试着用: CDN、Create和他们文档中显示的
浏览 2提问于2021-09-11得票数 0
回答已采纳
1回答
在与卷取捆绑后没有使用顺风样式。
、、、、
很抱歉，如果这是一个明显的问题，这是我第一次尝试构建组件库。这是我的tailwind.config.js文件： content: ['./index.css文件很简单：@tailwind
浏览 4提问于2022-06-20得票数 2
回答已采纳
我有反应和尾风CSS安装。我是从世博会开始的。要创建应用程序，请执行以下操作。我的代码在下面，然后出现错误。任何帮助都将不胜感激。import React from "react";
import { Button, StyleSheet, Text, View } from "react-native"
浏览 12提问于2022-02-25得票数 1
由于最近将react-portal升级到16.8.6，一直试图从v2迁移到v4。import { Portal } from 'react-portal';
import 'dialog-polyfill/d
浏览 4提问于2020-03-31得票数 0
回答已采纳
1回答
我想显示一个警告，但我的警告使我的应用程序向下滚动，像这个，我想显示在中心的警报，并提高它。
<Provider>
浏览 0提问于2021-11-01得票数 0
回答已采纳
我使用的反应-引导的模式，为我的CRUD应用程序呈现一个模态，当用户点击阅读一个项目，一个模式将弹出与所有的信息要求。这个问题在应用程序的第一次发布时就呈现出来了，并且它将永远存在。该模式停留在页面底部，而我的布尔值用于显示/隐藏该模型，下面是我所称的：没有任何帮助，当我移除打开的</e
浏览 0提问于2019-02-13得票数 0
回答已采纳
我已经在react中使用HTMl和CSS创建了modal，但是在部署到环境中时modal不能正常工作，因为我已经将modal的z-index设置得更高在react中有没有什么方法，这样我们就可以覆盖所有现有的z-index，模式就会像预期的那样工作。我提供的
浏览 0提问于2018-04-24得票数 0
我有两个元素一个按钮和一个对话框
<button className=" px-6 py-2 rounded absolute mt-12 ml-12" onClick={} >Click</buttonconstruc
浏览 3提问于2020-05-02得票数 1
回答已采纳
3回答
如何集中反应引导模态？
、、、
我正在使用react引导模式，并试图将其定位为中心化，目前我正在指定该模型的width，然后将modal-dialog类上的页边距设置为285px !important，这似乎是可行的。这是指向的链接。我的CSS看起来如下：- width: 1200px .modal-dialog {
浏览 3提问于2020-01-30得票数 1
回答已采纳
如果在我的index.html文件中，有一个带有"modal-should-be-appended-here" id的div标记：默认情况下，脉轮UI的Portal将被追加到document.body的末尾
import { Portal } from "@
浏览 2提问于2021-08-01得票数 0
我的项目漏掉了--是node_modules dir。": "^1.2.0", }, "start": "npm run tailwind:css && react-scriptsstart",
"build": "npm run tailwi
浏览 15提问于2021-10-01得票数 1
回答已采纳
我一直在将我的CRA项目升级到TailwindCSS 3，但是现在CSS嵌套不再有效了。启动服务器后，控制台将发出：注意:我也尝试使用require('tailwind/nesting')的
浏览 34提问于2022-01-11得票数 11
回答已采纳
3回答
升级进行得很顺利，但我现在遇到了一个问题，在我运行"npm“之后，添加更多的开发中的顺风css类在重新编译应用程序时不会被选中，我理解这是JIIT引擎的工作。
我期望顺风检测更改并添加/删除所需的类。我尝试将基类从“basis 1/2”更改为“basis 3/4”，但是由于在初始构建中没有包含类“bas-2/5”，所以类在热重新加载后出现在div上，但是类没有加载在样式表中。我知道这是一个特定于顺风<e
浏览 11提问于2022-02-20得票数 3
我试图使用描述的门户方法包装语义UI模式组件 return <div className="ui modal"/>; <-- the idea at first was to only returnReact.render(<div > <--------
浏览 8提问于2015-03-15得票数 4
回答已采纳
我在有状态组件的呈现方法中使用了ReactDOM.createPortal，如下所示： ...但是，它也能被无状态(功能)组件使用吗？
浏览 6提问于2018-03-22得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
