To apply overflow specifically to the DialogContent, follow these steps:

<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>

To modify your sx property, include the following:

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

I successfully tackled this issue using a functional component in the code snippet below.

To address this problem, you need to adjust the overflow attribute of the "< html >" tag.

When the isOpen variable is true, it will apply the "overflow-hidden" class to the html tag.

Conversely, when isOpen is false, it will remove the "overflow-hidden" class from the html tag.

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>
  );
};

Remember to include the following class in your global styles:

.overflow-hidden {
  overflow: hidden !important;
}

Did you attempt using the !important declaration? For example, try adding it like this: overflow: 'hidden !important'

include all dialogue components within the

<Dialog><DialogContent>.....</DialogContent></Dialog>

Add all dialogue elements within the

<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>
    );
}

To eliminate the scrollbar, you can make use of the pseudo element -webkit-scrollbar:

.MuiDialog-paper::-webkit-scrollbar {
  display: none;
}

If this solution doesn't work for you, you can attempt the following:

.MuiDialog-root::-webkit-scrollbar {
  display: none;
}

One drawback is that you cannot apply this inline, but I have tested it and can confirm that it does work.

If you want to experiment, give this a shot:

<DialogContent className={classes.customScroll}>

Here are the corresponding styles:

const useStyles = makeStyles(theme => ({
customScroll: {
    overflow: 'scroll',
  },

When working with Material-ui Backdrop, I encountered the same issue. I decided to follow Fatih Turgut's approach with a small tweak

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 CustomBackdrop() {
 
  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 CustomBackdrop;

Here's a solution that worked for me:

.mat-mdc-dialog-surface {
  overflow: hidden !important;
}

By inspecting the code, I was able to identify the background style causing the overflow issue.