在React和material-ui中将弹出窗口或div高度设置为“100%”
在React和material-ui中将弹出窗口或div的高度设置为"100%"可以通过以下步骤实现：
- 首先，确保你已经安装了React和material-ui的相关依赖。
- 在你的React组件中，引入material-ui的相关组件和样式：
import React from 'react';
import { Dialog, DialogContent } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';- 创建一个样式对象，使用makeStyles函数来定义样式：
const useStyles = makeStyles({
dialogContent: {
height: '100%',
},
});- 在组件函数中使用样式对象，并将其应用到Dialog组件的DialogContent组件上：
const MyComponent = () => {
const classes = useStyles();
return (
<Dialog open={true}>
<DialogContent className={classes.dialogContent}>
{/* 内容 */}
</DialogContent>
</Dialog>
);
};通过以上步骤，你可以将弹出窗口或div的高度设置为"100%"。这样设置可以确保弹出窗口或div的高度与父容器的高度保持一致，实现全屏效果。
关于material-ui的更多信息和相关产品推荐，你可以访问腾讯云的官方文档和产品介绍页面：
相关·内容
1回答
在React和material-ui中将弹出窗口或div高度设置为“100%”
javascript、reactjs、material-ui
<Popper id={id} open={open} anchorEl={anchorEl} style={{opacity:'0.5',width:'100%',size:'100%'}}>这样，Popper将变为宽度100%，但不是高
浏览 38提问于2021-03-03得票数 0
回答已采纳
2回答
视图中的中间Popover
reactjs、material-ui、next.js
我的应用程序是建立在Next.js框架上的，这个框架建立在React上。(我在下面的package.json中包含了全部依赖项。)</video>我想让视频集中在视图中。
在不太明显的情况下，onClick处理程序只是将state.video设
浏览 0提问于2018-12-18得票数 3
回答已采纳
2回答
材料-用户界面菜单高度问题
javascript、css、reactjs、material-ui、menu-items
我希望通过应用css将菜单高度设置为窗口高度。如果页面中的元素垂直增加，那么相对于页面长度，菜单高度也应该增加。我使用了“高度:100%”&也尝试在样式中使用“高度:100 it”，但它不起作用。我有以下代码：import Menu from
浏览 6提问于2017-10-14得票数 1
2回答
渲染是否未更新？
javascript、reactjs
当我想要删除用户时，我想要显示一个确认弹出窗口。因此，当我按下delete按钮时，我希望弹出窗口出现。我所做的是，我有一个弹出式窗口，我根据一个poster变量呈现它。如果为真，则显示；如果为假，则不显示。从逻辑上讲，当我按下delete按钮时，我应该显示我的弹出窗口，所以我修改了变量并将其放入true，但我的弹出窗口没有显示
import React from
浏览 16提问于2019-08-17得票数 0
1回答
我如何伸展我的项目容器和设置底部和顶部的边距？
css、reactjs、flexbox、grid、material-ui
我想把我的Item Container设置在我的div的中心，把它伸展到所有可用的高度，并设置Bottom and Top margin。我当然可以设置Grid Item and Paper to 100%的高度，但我不认为这是一种让元素填充所有垂直空间的优雅方法(第二个版本代码)。此外，如果我将网格项目高度和纸张高度设置为100%，并将上页边距
浏览 0提问于2019-08-23得票数 0
1回答
使停电区域延伸到100%的高度。
html、css
我有一个“停电”div (一个在50%的不透明度上用黑色填充整个屏幕的div )来帮助创建一个弹出div的焦点。
我目前将停电div设置为height: auto和min-height为100 VH。弹出式div的高度为600 px。问题是，如果浏览器窗口的高度小于弹出式<e
浏览 0提问于2015-04-28得票数 0
6回答
100%高度不适合抽屉，材料设计反应
html、css、reactjs、material-design
我正在使用React Material UI (文档)中的responsive抽屉import PropTypes from 'prop-typ
浏览 4提问于2017-11-28得票数 7
1回答
如何将material ui Popper的宽度设置为其容器的宽度，同时将禁用门户设置为false
javascript、reactjs、typescript、material-ui
我想让弹出器把容器放在y方向。所以我设置了disableportal={false}。但是在将disableportal设置为false之后，当我提供width: 100%时，popper占据了整个浏览器的宽度，而不仅仅是容器的宽度。我不希望弹出器在x方向上离开容器，而是将它的宽度调整为容器的宽度。我该如何实现这一点？请检查以下代码以重现上述问题。Popper from '@material-ui/
浏览 0提问于2020-03-04得票数 5
1回答
为什么容器没有填满整个屏幕？
reactjs、material-ui
我正在试着为我的一条反应路线设置一个黑色背景。但当页面呈现时，我设置的黑色背景容器似乎并没有覆盖整个屏幕。即使我在App.js的div中将背景设置为黑色，容器也不会完全覆盖整个屏幕。foo.js路由 import React from 'react';i
浏览 21提问于2021-04-09得票数 1
回答已采纳
1回答
AutoComplete弹出窗口中的资料界面表
javascript、html、reactjs、material-ui
是否可以以Tabs的形式呈现AutoComplete弹出中的匹配数据？我可能有最多三类与输入值相匹配的数据，我想将其显示为选项卡。我能结合材料-UI，AutoComplete和Tabs组件来实现这一点吗？
浏览 0提问于2016-05-24得票数 0
回答已采纳
1回答
移动工具栏/菜单隐藏整个网站高度
javascript、html、css、reactjs、responsive-design
我发现这个问题似乎没有一个明确的解决方案，在移动用户访问网站时，如果不手动隐藏工具栏/菜单，则可以相应地调整大小。如何调整站点的大小，使其高度在移动设备窗口的内部高度内响应，并在隐藏工具栏时自动调整大小？下面是我的测试代码和这个问题的一些示例： import React from "react"
import { styled } from '@material-ui/core
浏览 15提问于2021-07-24得票数 0
回答已采纳
2回答
材料-ui-下一个响应式抽屉丢失边框
reactjs、border、material-ui
嗨，我是用资料界面下响应抽屉，当主要内容有许多项目抽屉缺少右边框。我刚看了反应抽屉的例子
浏览 1提问于2018-05-07得票数 0
回答已采纳
2回答
我有一个class=main-content的div，它的高度是100%。我创建了一个弹出表单，当一个链接被点击时弹出。理想情况下，此表单位于构成整个页面的div中。这样，我可以使这个div有一个灰色的背景颜色，所以它给用户的外观，他不能点击外面的表单。
但是，尽管我将弹出窗口设置为100%，但弹出窗口的高度与父窗口</
浏览 0提问于2013-04-14得票数 0
回答已采纳
2回答
如何在MaterialUI中将网格居中
javascript、reactjs、material-ui
我试着在屏幕的垂直和水平中心创建3个纸质元素。无论我应用什么css规则或支持什么，当我在控制台中检查HTML元素时，HTML的高度始终是76像素，并且元素不会低于该div的高度。我真的不知所措。import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core
浏览 32提问于2021-01-24得票数 2
回答已采纳
1回答
材料UI使两个元素的高度相同
css、reactjs、material-ui
我有以下代码： <TextField className="manualUserFollowTxtthis.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)} Follow</div</em
浏览 4提问于2019-10-25得票数 0
回答已采纳
2回答
如何垂直中心材料UI组件，以填补剩余的集装箱？
css、reactjs、material-ui
在登录页面的右侧，应该有两个组件(登录头和登录表单)。我希望登录标题采取约20-30%的容器高度和登录形式应该是垂直/水平在剩余的空间内(60%-70%的集装箱空间)。代码：登录页右侧的与左侧的高度不匹配。登录表单是居中的，但不是垂直的，没有使用的剩余空间，右侧的网格项之间没有间隔？。
浏览 4提问于2021-06-30得票数 0
3回答
设置为100%的Div当滚动时不会增长
javascript、jquery、html、css
我有一个侧div菜单，设置为高度: 100%。它工作良好，直到页面展开，我需要滚动，然后div保持在原来的高度。我试过： $menu.css({'bottom':'0px'});以及：.menu_cli
浏览 1提问于2016-03-24得票数 0
1回答
如何用自定义组件替换React-Leaflet弹出窗口？
javascript、reactjs、material-ui、react-leaflet
我在一个项目中使用React-Leaflet和(callemall)Material-UI。我尝试在React-Leaflet的<Popup></Popup>组件中呈现Material-UI组件。我试着把它作为一个组件拉到弹出窗口中，但是弹出窗口不能让该组件正常工作。具体地说，卡片组件有一个按钮元素来展开它，但不幸的是，弹出窗口不
浏览 17提问于2016-08-14得票数 3
回答已采纳
1回答
如何使用reactjs实现弹出
javascript、html、reactjs、react-native、react-hooks
单击元素时如何生成弹出信息框。如下图所示：
就像这张图片，你点击“查看所有的学习设备”元素，然后得到弹出的更多信息。这是我的密码： <div className="description-container"> <ul className>
<div c
浏览 4提问于2022-04-20得票数 1
回答已采纳
2回答
如何在不关闭窗口的情况下使弹出窗口可在窗口内单击，但通过外部单击关闭
javascript、html、ajax
如何使我的弹出窗口在窗口区域内可点击而不关闭，但在区域外单击时自动关闭？response.Entity.Exception); return showErrorPopup(errorButton, 'No Error', response.Message);和打开弹出窗口的函数placement: 'left', html: true
}
浏览 0提问于2014-01-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
