Estoy usando el diálogo de material ui con react js y quiero aumentar su ancho. Sé que hay un accesorio llamado maxWidth y lo he usado. Solo aumenta el ancho hasta 900px (cuando maxWidth="lg" ). Sé que hay un fullScreen de pantalla completa en el que el cuadro de diálogo ocupa toda la pantalla. Lo que quiero es no tomar toda la pantalla pero quiero tener más de 900px de ancho. ¿Alguien me puede ayudar?
Lo averigué...
Debe importar makeStyles desde material-ui/core y anular algunos estilos de material.
Este es un código de componente compartido de diálogo.
import React from 'react'; //Material UI Components import { Dialog, DialogContent } from '@material-ui/core'; //Material UI Styling import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ root: { ".MuiDialogContent-root": { padding: "0px 24px 8px 24px !important" }, "& .MuiDialog-paperWidthLg": { maxWidth: "none !important" }, "& .MuiDialog-paper": { margin: 0 }, "& .MuiDialogTitle-root": { padding: "4px !important" } }, content: { "&:first-child": { paddingTop: "12px" } } }); export default function PopUp(props) { const { children, openPopup, setOpenPopup, } = props; const classes = useStyles(); const handleClose = () => { setOpenPopup(false); }; return ( < Dialog className = { classes.root } onClose = { handleClose } open = { openPopup } maxWidth = "lg" > < DialogContent className = { classes.content } > { children } < /DialogContent> < /Dialog> ) }Material Ui tiene una gran cantidad de formas para personalizar sus componentes, le sugiero que lea la documentación al respecto: Cómo personalizar
Cuando se trata de un solo componente, podría ser más fácil para usted usar elaccesorio sx
Por ejemplo, como está escrito en la documentación:
<Slider defaultValue={30} sx={{ width: 300, color: 'success.main', }} />