We Keep Coding

Material UI dialog changes style of other components when opening

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

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

I got the fix by adding some css to the html body.
body {
margin: 0;
padding: 0;
}

React Component Re-Renders when updating input using React Hooks

I'm working on a React Project. I'm building a form with about 5 fields in it. I've used React Hooks to manage the state of the updates however when I enter in an input into the field. I can see the component re-render each time I enter a key stroke. the re-render is causing issues because it sets a state of a form field back to empty. Any help would be greatly appreciated!
Thanks,
Link to a gif of the re-render on keystroke can be found here: https://gph.is/g/ZxDqzmN
Link to clearing the form field: https://gph.is/g/4LjmDpd
import React, { useState } from "react";
import styled from "styled-components";
import {
Button,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Card as MuiCard,
Paper as MuiPaper,
TextField,
} from "#material-ui/core";
import { spacing } from "#material-ui/system";
export default function EmployeeFormDialog() {
const [open, setDialog] = useState(null);
const [carName, setCarName] = useState([""]);
const onSubmit = (data, event) => {
event.preventDefault();
console.log(data);
setDialog(false);
};
console.log("re-render");
const Card = styled(MuiCard)(spacing);
const Paper = styled(MuiPaper)(spacing);
return (
<Card mb={6}>
<CardContent>
<Paper mt={4}>
<div>
<Button variant="contained" color="primary" onClick={() => setDialog(true)}>
Add New Cars
</Button>
<Dialog open={open} aria-labelledby="form-dialog-title" disableEnforceFocus="true">
<form onSubmit={onSubmit}>
<DialogTitle id="form-dialog-title">Add New Car</DialogTitle>
<DialogContent>
<DialogContentText>To add new car</DialogContentText>
<TextField
onChange={(e) => setCarName(e.target.value)}
defaultValue={carName}
name="carName"
margin="dense"
id="carName"
label="Car Name"
type="text"
fullWidth
/>
<TextField
autoFocus
name="carYear"
margin="dense"
id="carYear"
label="Car Year"
type="text"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button type="button" onClick={() => setDialog(false)} color="primary">
Cancel
</Button>
<Button type="submit" color="primary">
Add Car
</Button>
</DialogActions>
</form>
</Dialog>
</div>
</Paper>
</CardContent>
</Card>
);
}

How to edit a form when it is loaded with values?

I have a form loaded with values when it is rendered by onClick from a component. I need to edit the current values and perform an update operation.
Following is the sandbox link
https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo.js.
Should I set the state to implement this?

Yes you need to save value in state. And when user click on subscribe fetch that value from state. Here is updated code:
import React from "react";
import Button from "#material-ui/core/Button";
import TextField from "#material-ui/core/TextField";
import Dialog from "#material-ui/core/Dialog";
import DialogActions from "#material-ui/core/DialogActions";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
import DialogTitle from "#material-ui/core/DialogTitle";
import Form from "semantic-ui-react";
export default function FormDialog() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState("Hello");
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address here.
We will send updates occasionally.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Application Name"
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</Dialog>
</div>
);
}
Here is the demo: https://codesandbox.io/s/material-demo-forked-ln0xe?file=/demo.js:0-1824

React: Blur background when Material-UI Dialog appeared

Is there any way I can blur the background content when an MUI dialog appears? (the default action is darkening the background, but I need to blur it).
Here's what I am looking for:

One way to solve this is to use a backdropFilter on the dialog backdrop, which can blur the background. The backdropFilter css property is a relatively new css feature but it works well on Chrome, Edge, Samsung Internet and Safari. It doesn't work on Firefox at this time. But maybe that's suitable for you? Here's a code example:
import React from "react";
import { Dialog, DialogContent, makeStyles, Theme, Typography } from "#material-ui/core";
const useStyles = makeStyles((theme: Theme) => ({
backDrop: {
backdropFilter: "blur(3px)",
backgroundColor:'rgba(0,0,30,0.4)'
},
}));
export default function ExampleDialogComponent() {
const classes = useStyles();
return (
<Dialog
open={true}
BackdropProps={{
classes: {
root: classes.backDrop,
},
}}
onClose={() => {}}
>
<DialogContent style={{ textAlign: "center" }}>
<Typography variant="body1">Example Dialog</Typography>
</DialogContent>
</Dialog>
);
}
Update for Material UI 5
In the upcoming version of Material UI 5, you could use a styled component like this:
import Box from "#material-ui/core/Box";
import { experimentalStyled as styled } from "#material-ui/core/styles";
import Dialog, { DialogProps } from "#material-ui/core/Dialog";
import DialogTitle from "#material-ui/core/DialogTitle";
import DialogContent from "#material-ui/core/DialogContent";
import DialogActions from "#material-ui/core/DialogActions";
import Button from "#material-ui/core/Button";
import CssBaseline from "#material-ui/core/CssBaseline";
const BlurryDialog = styled(Dialog)<DialogProps>(({ theme }) => ({
backdropFilter: "blur(5px)",
// other styles here...
}));
export default function ExampleNextDialog() {
return (
<>
<CssBaseline />
<BlurryDialog fullWidth onClose={() => {}} open={true} maxWidth="xs">
<DialogTitle>Example Dialog</DialogTitle>
<DialogContent>Example Content Here</DialogContent>
<DialogActions>
<Button>ooooh.</Button>
</DialogActions>
</BlurryDialog>
<Box
sx={{
minHeight: "100vh",
background:
"url(https://source.unsplash.com/random) no-repeat center center",
backgroundSize: "cover",
}}
></Box>
</>
);
}
Or use the sx prop like this:
import Box from "#material-ui/core/Box";
import Dialog from "#material-ui/core/Dialog";
import DialogTitle from "#material-ui/core/DialogTitle";
import DialogContent from "#material-ui/core/DialogContent";
import DialogActions from "#material-ui/core/DialogActions";
import Button from "#material-ui/core/Button";
import CssBaseline from "#material-ui/core/CssBaseline";
export default function ExampleNextDialog() {
return (
<>
<CssBaseline />
<Dialog
fullWidth
onClose={() => {}}
open={true}
maxWidth="xs"
sx={{
backdropFilter: "blur(5px)",
//other styles here
}}
>
<DialogTitle>Example Dialog</DialogTitle>
<DialogContent>Example Content Here</DialogContent>
<DialogActions>
<Button>ooooh.</Button>
</DialogActions>
</Dialog>
<Box
sx={{
minHeight: "100vh",
background:
"url(https://source.unsplash.com/random) no-repeat center center",
backgroundSize: "cover",
}}
></Box>
</>
);
}

You need to add some class to your content root block after dialog opens and add filter styles for that class: filter: blur(3px);

How to make a Material UI react Button act as a react-router-dom Link?

How can I make a Material UI react Button component act as a Link component from react-router-dom without losing it's original style? Like changing the route on click.
import Button from '#material-ui/core/Button';
<Button variant="contained" color="primary">
About Page
</Button>
To something like this, but maintaining the original Button style:
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button variant="contained" color="primary">
<Link to="/about">
About Page
</Link>
</Button>

Okay, this is very easy, I don't know why it was not working with me:
Just do like this:
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button component={Link} to="/about" variant="contained" color="primary">
About Page
</Button>
You can find more details at https://mui.com/material-ui/guides/routing/.

MUI 5 has simplified this even further. Simply provide a MUI Button with a href attribute as follows:
import Button from '#mui/material/Button';
<Button href="/" variant="contained">
Link
</Button>

You need to wrap the <Button /> inside the <Link /> component.
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
const ButtonWithLink = () => (
<Link to="/about">
<Button variant="contained" color="primary">
About Page
</Button>
</Link>
)

You way worked for me
import Button from '#material-ui/core/Button';
import { useHistory } from 'react-router-dom';
const YourComponentName = () =>{
const history = useHistory();
const handleRoutes = (path) =>{
history.push(path)
}
return(
<>
...
<Button
variant="contained"
color="primary"
onClick={() => handleRoutes('/about')}>
About Page
</Button>
...
</>
)
}