Menu
Want to add close icon in header section top right corner. Please help me for same. I have used Material UI Dialog. evrything is working fine but I want close button on top section. Please see the attached image. 
1000
To add a close icon in React Material UI Dialog header's top right corner, we can put the title and the close icon in a Grid component. To add the dialog box, we add the Dialog component. We also have a Open Button to open the dialog when we click it.
If you don't use Material UI in your project yet, install the icons package with npm install @mui/icons-material @mui/material @emotion/styled @emotion/react .
The simplest way to specify/override the color of an Icon in Material-UI is to use a custom CSS class name. Suppose that you want to show a green checkbox rather than a red triangle, depending on the outcome of some process. You then apply makeStyles to that function, and run the result.
I know this was asked pre Material UI V1 but the accepted answer works for Material UI version 0 (or whatever they called it).
For people wanting help with version 1 the MUI guys have exposed a <DialogTitle /> component that accepts a disableTypography so you can customize your dialog.
EG
<Dialog open={this.state.show} onClose={this.onClose}> <DialogTitle disableTypography className={styles.dialogTitle}> <h2>Dialog...</h2> <IconButton onClick={this.onClose}> <CloseIcon /> </IconButton> </DialogTitle> <DialogContent> <span>Dialog Content</span> </DialogContent> </Dialog> I just use flex with space between for the h2 and the Icon
.dialogTitle { display: flex; justify-content: space-between; align-items: center; } Hope that helps somebody out. :-)
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
