[英]mui v5 styled Dialog not accepting styled width
我有 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>
设置宽度和最大宽度的正确方法是什么。
在 styledDialog 声明上试试这个:
const StyledDialog = styled((props) => (
<Dialog
fullWidth={true}
maxWidth={'lg'}
{...props}
/>
))(({ theme }) => ({
// Your code to style the dialog goes here
}));
您的代码的问题是您没有将属性 fullWidth 和 maxWidth 传递给组件。
您正在尝试像 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
...
}));
你可以看看默认主题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.