I have this Dialog ponent which I am showing from a button on my AppBar ponent. 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 ponents.
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 ponent.
import React from 'react';
import Navbar from './ponents/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 './ponents/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" ponent="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"
ponent="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('');
}}
ponent={Link}
to={'/process'}
>Process</Button>
</DialogActions>
</DialogContent>
</Dialog>
);
}
I have this Dialog ponent which I am showing from a button on my AppBar ponent. 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 ponents.
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 ponent.
import React from 'react';
import Navbar from './ponents/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 './ponents/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" ponent="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"
ponent="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('');
}}
ponent={Link}
to={'/process'}
>Process</Button>
</DialogActions>
</DialogContent>
</Dialog>
);
}
- 2 you're using mui v5 and importing ponents from v4 i.e '@material-ui/core/DialogActions' is v4 not v5. try converting all your imports to v5 – MhkAsif Commented Dec 14, 2021 at 12:52
3 Answers
Reset to default 4There is a good chance it is due to your mixing of @mui and @material-ui.
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 ponents and things should be fine
I got the fix by adding some css to the html body.
body {
margin: 0;
padding: 0;
}