无法从 Material UI 对话框中删除滚动条

Question

我有一个带有键盘的模式窗口。一切都很好，只是我无法删除滚动条。我尝试添加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组件呈现的位置，但它仍然无法正常工作。

有任何想法吗？

Answer 1

只需将溢出设置为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>

Answer 2

在你的 sx 属性中添加：

'&::-webkit-scrollbar': {display: none}

Answer 3

您尝试过添加 !important 吗？像这样：溢出：'隐藏！重要'