我有一个带有键盘的模态窗口。一切都很好,除了我无法删除滚动条。我尝试添加
overflow:'hidden'
作为内联 css 但仍然没有。
此外,即使在引导程序中使用
container-full padding-0
,组件仍然不会到达屏幕边缘。所以我想这就是问题所在。
这是我渲染组件的地方
<div className="container-full padding-0">
<div className="row">
<div className="col-sm-3">
<ButtonsGrid list={this.state.list} clicked={this.clicked}/>
</div>
<div className="col-sm-3" style={{paddingLeft:0, paddingRight:0}}>
<ButtonsGrid list = {this.state.list} clicked={this.clicked}/>
</div>
<div className="col-sm-6" style={{paddingRight: 0, paddingLeft: 0}}>
<Keyboard search={this.search}/> <-------------- HERE
</div>
</div>
</div>
组件的
render
看起来像这样:
render() {
return(
<div>
<Paper
onClick={this.toggleKeyboard}>
<p
style={{
fontSize:40,
overflow:'hidden'}}>
{this.state.input !== '' ?
this.state.input : 'Search...'}
</p>
</Paper>
<br />
{this.state.showKeyboard ?
<Dialog
open={this.state.showKeyboard}
maxWidth='md'fullWidth>
<GridList
cellHeight={50}
cols={11}
style={{overflowX:'hidden'}}>
{this.state.keyboard.length > 0 ?
this.state.keyboard.map(key => {
return(
<Button
disabled={key.value === ''}
key={Math.random()*13}
style={{minWidth: '30px', border: '1px solid'}}
color="default"
onClick={key.value !== 'Enter' ?
() => this.onInputChanged(key.value) :
() => this.search(key.value)}>
<div
style={{fontSize:'15px',
display: 'flex',
justifyContent: 'center',
textAlign:'center'}}
>
{key.value}
</div>
</Button>
)
}):null}
</GridList>
</Dialog>:''}
</div>
);
}
我尝试将
overflow:'hidden'
添加到渲染组件的 div
,但它仍然不起作用。
有什么想法吗?
只需将溢出设置为
DialogContent
:
<Dialog
fullWidth={true}
maxWidth="xl"
open={this.state.isChartOpen}
onClose={() => this.setState({ isChartOpen: false })}
>
<DialogContent style={{ overflow: "hidden" }}>
<ContractPriceChart contracts={this.props.contracts} />
</DialogContent>
</Dialog>
在您的 sx 属性中添加:
'&::-webkit-scrollbar': {display: none}
我在以下代码中在功能组件中解决了这个问题。
您应该操作“< html >”标签的溢出属性。
当 isOpen 为 true 时,它将向 html 标签添加“overflow-hidden”类。
当 isOpen 为 false 时,它将从 html 标签中删除“overflow-hidden”类。
import React, { useEffect } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
const MyDialog = (props) => {
const { isOpen } = props;
useEffect(() => {
const htmlElement = document.querySelector('html');
if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, []);
useEffect(() => {
const htmlElement = document.querySelector('html');
if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, [isOpen]);
return (
<div>
<Dialog
open={isOpen}
maxWidth="xl"
>
<DialogContent>
Content 1
Content 2
</DialogContent>
</Dialog>
</div>
);
};
并将此类添加到您的全局样式中。
.overflow-hidden {
overflow: hidden !important;
}
您尝试过添加 !important 吗?像这样:溢出:'隐藏!重要'
将所有对话框元素放入
<Dialog><DialogContent>.....</DialogContent></Dialog>
将所有对话框元素放入
<Dialog><DialogContent>.....</DialogContent></Dialog>
此处代码:
render() {
return(
<div>
<Paper
onClick={this.toggleKeyboard}>
<p
style={{
fontSize:40,
overflow:'hidden'}}>
{this.state.input !== '' ?
this.state.input : 'Search...'}
</p>
</Paper>
<br />
{this.state.showKeyboard ?
<Dialog
open={this.state.showKeyboard}
maxWidth='md'fullWidth>
<GridList
cellHeight={50}
cols={11}
style={{overflowX:'hidden'}}>
<DialogContent>
{this.state.keyboard.length > 0 ?
this.state.keyboard.map(key => {
return(
<Button
disabled={key.value === ''}
key={Math.random()*13}
style={{minWidth: '30px', border: '1px solid'}}
color="default"
onClick={key.value !== 'Enter' ?
() => this.onInputChanged(key.value) :
() => this.search(key.value)}>
<div
style={{fontSize:'15px',
display: 'flex',
justifyContent: 'center',
textAlign:'center'}}
>
{key.value}
</div>
</Button>
)
}):null}
</GridList>
</DialogContent>
</Dialog>:''}
</div>
);
}
尝试利用伪元素-webkit-scrollbar来删除它:
.MuiDialog-paper::-webkit-scrollbar {
display: none;
}
如果不起作用你可以尝试:
.MuiDialog-root::-webkit-scrollbar {
display: none;
}
缺点是你不能内联使用它,但我在这里测试了它的工作原理。
你可以尝试一下:
<DialogContent className={classes.hiddenScroll}>
以及他们的风格:
const useStyles = makeStyles(theme => ({
hiddenScroll: {
overflow: 'hidden',
},
我在使用 Material-ui Backdrop 时遇到了同样的问题。尝试过 Fatih Turgut 方法,但略有不同
import React, { useEffect, useState } from 'react';
import { Backdrop } from '@material-ui/core';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
paper: {
zIndex: 20,
},
});
function Example() {
const [open, setOpen] = useState(true);
useEffect(() => {
const htmlElement = document.querySelector('body');
if (open || !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, [open]);
const classes = useStyles();
const handleOpen = open => {
setOpen(open);
};
return (
<Backdrop
className={classes.paper}
open={open}
onClick={() => handleOpen(!open)}
>
<h1>hello</h1>
</Backdrop>
);
}
export default Example;
这对我有用:
.mat-mdc-dialog-surface {
overflow: hidden !important;
}
我只需要检查一下溢出的背景是什么风格。