mui v5 样式对话框不接受样式宽度

Question

我有 mui v5 对话框，我无法使用 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>

但是，如果我直接在其中列出道具，它就可以工作。

<StyledDialog fullWidth="true" maxWidth="lg">

</StyledDialog>

设置宽度和最大宽度的正确方法是什么。

Answer 1

在 styledDialog 声明上试试这个：

const StyledDialog = styled((props) => (
    <Dialog
        fullWidth={true}
        maxWidth={'lg'}
        {...props}
    />
))(({ theme }) => ({
    // Your code to style the dialog goes here
}));

您的代码的问题是您没有将属性 fullWidth 和 maxWidth 传递给组件。

Answer 2

您正在尝试像 css 一样使用 maxWidth: lg 和 fullWidth: true，但它们仅适用于 Dialog API。

所以你可以在组件中使用maxWidth 作为 API，比如

<Dialog maxWidth="lg" fullWidth ... >

或者您可以使用主题将其添加为 css 样式。

const StyledDialog = styled(Dialog)(({ theme }) => ({
  maxWidth: theme.breakpoints.values.lg, // there's no styling such fullWidth
  ...
}));

你可以看看default theme。