Material UI dialog changes style of other components when opening

Question

I have this Dialog component which I am showing from a button on my AppBar component. Whenever I open that dialog, the margin on my navbar elements changes and I cant figure why. Upon inspecting the html using the dev tools nothing changes, no css changes on either of the elements on my components.

Any suggestions on how to debug this properly or where in the MUI docs to look is helpfull.

Edit: class .MuiTouchRipple-root is attached to my AddCircle component.

import React from 'react';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Box from '@mui/material/Box';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import { useState } from 'react';
import SelectInvoiceDialog from './components/SelectInvoiceDialog';
import ProcessInvoice from './pages/ProcessInvoice';

function App() {
  const [open, setOpen] = useState(false);
  const openSelectDialog = () => setOpen(true);
  const closeSelectDialog = () => setOpen(false);

  return (
  <Router>
    <Box>
      <Navbar openDialog={openSelectDialog}/>
      <Switch>
        <Route exact path="/process">
          <ProcessInvoice />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Box>
    <SelectInvoiceDialog open={open} closeAction={closeSelectDialog}/>
  </Router>
  );
}

export default App;

import React from "react";
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import AddCircle from '@material-ui/icons/AddCircle'
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => createStyles({
    navBarStyle: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        display: 'flex',
        flexDirection: 'row',
        color: 'white'
    }
}));

export default function Navbar ({ openDialog }) {
    const classes = useStyles();
    return (
        <Box>
            <AppBar position="static">
                <Toolbar className={classes.navBarStyle}>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>Invoice processor</Typography>
                    <IconButton
                        size="large"
                        color="inherit"
                        onClick={openDialog}
                    >
                        <AddCircle />
                    </IconButton>
                </Toolbar>
            </AppBar>
        </Box>
    );
}

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import { DialogTitle, Select, MenuItem, FormControl, InputLabel, Box, TextField, Typography} from "@mui/material";
import { Link } from 'react-router-dom'
import { useState } from 'react';

export default function SelectInvoiceDialog ({ open, closeAction }) {
    const [filePath, setFilePath] = useState('');
    const [selection, setSelection] = useState('');

    const handleChange = (e) => setSelection(e.target.value)

    return (
            <Dialog 
                open={open} 
                onClose={closeAction}
                fullWidth
                disableEnforceFocus
                >
                <DialogTitle>Process Invoice</DialogTitle>
                <DialogContent>
                    <FormControl fullWidth>
                        <InputLabel id="selectTemplateLabel">Template</InputLabel>
                        <Select
                            labelId="selectTemplateLabel"
                            id="selectTemplate"
                            value={selection}
                            onChange={handleChange}
                            label="Template"
                        >
                            <MenuItem value={'DELL'}>DELL</MenuItem>
                            <MenuItem value={'AI'}>Automatic AI</MenuItem>
                            <MenuItem value={'30'}>Thirty</MenuItem>
                        </Select>
                    </FormControl>
                    <FormControl fullWidth>
                        <TextField label="Debtor Number"/>
                    </FormControl>
                    <FormControl>
                        <Typography>{filePath ? 'File name:' : ''} {filePath}</Typography>
                        <Button
                            variant="contained"
                            component="label"
                            size="large"
                        >
                            SELECT FILE
                            <input type="file" hidden onChange={(e) => setFilePath(e.target.files[0].name)}/>
                        </Button>
                    </FormControl>
                    <DialogActions>
                        <Button 
                        variant="contained" 
                        onClick={() => {
                            closeAction();
                            setFilePath('');
                        }}
                        component={Link} 
                        to={'/process'}
                        >Process</Button>
                    </DialogActions>
                </DialogContent>
            </Dialog>
    );
}

Answer 1

There is a good chance it is due to your mixing of @mui and @material-ui.

Answer 2

as @Jeffrey Pinyan stated, mixing imports could break styling.

'@material-ui/core/....' represents older version of MUI (means that you import an old version of...whatever)
'@mui/material/....' represents the new version of MUI ( this is how you should import ... whatever)`

just use the same place for importing MUI components and things should be fine