Tengo un cuadro de diálogo mui v5 que no puedo establecer su ancho usando el componente style().
import { Dialog, DialogContent, DialogTitle, Paper, Typography, } from "@mui/material"; import { Close } from "@mui/icons-material"; import { styled } from "@mui/material/styles"; import ActionButton from "./ActionButton"; import React from "react"; const StyledDialog = styled(Dialog)(({ theme }) => ({ fullWidth: true, // it's not taking effect maxWidth: "lg", // it's not taking effect padding: theme.spacing(2), position: "absolute", top: theme.spacing(5), "& MuiDialog-paper": { padding: theme.spacing(2), position: "absolute", top: theme.spacing(5), }, "& .MuiTypography-h6": { paddingRight: "0px", }, })); export default function Popup(props) { const { title, children, openPopup, setOpenPopup } = props; return ( <StyledDialog open={openPopup} onClose={() => setOpenPopup(false)}> <DialogTitle> <div style={{ display: "flex" }}> <Typography variant="h6" component="div" style={{ flexGrow: 1 }}> {title} </Typography> <ActionButton color="secondary" onClick={() => setOpenPopup(false)} > <Close /> </ActionButton> </div> </DialogTitle> <DialogContent dividers>{children}</DialogContent> </StyledDialog>Sin embargo, si enumeré los accesorios directamente dentro, funciona.
<StyledDialog fullWidth="true" maxWidth="lg"> </StyledDialog>¿Cuál es la forma correcta de configurar el ancho y maxWidth.
Pruebe esto en la declaración styledDialog:
const StyledDialog = styled((props) => ( <Dialog fullWidth={true} maxWidth={'lg'} {...props} /> ))(({ theme }) => ({ // Your code to style the dialog goes here }));El problema en su código es que no está pasando las propiedades fullWidth y maxWidth al componente.
Está intentando usar maxWidth: lg y fullWidth: true como css, pero son solo para la API de diálogo .
Entonces podría usar maxWidth en el componente como una API como
<Dialog maxWidth="lg" fullWidth ... >o puede agregarlo como estilo css usando el tema.
const StyledDialog = styled(Dialog)(({ theme }) => ({ maxWidth: theme.breakpoints.values.lg, // there's no styling such fullWidth ... }));Podría echar un vistazo al tema predeterminado .