我想设计 Paper
MaterialUI 的 Dialog
const StyledDialog = styled(Dialog)`
& .MuiPaper-root {
width: 600px;
}
`;
但是,这意味着嵌套在 Dialog 中的所有元素都具有
MuiPaper-root
类(例如,其他论文)将继承它。有什么方法可以将此样式范围限定为第一个对话框使用的纸张?
最佳答案
有几种方法可以解决这个问题。一种方法是使用子选择器(如 Kaca992 的回答中所述),但 Paper
不是 Dialog
的直系 child 所以要使用这种方法你需要 & > .MuiDialog-container > .MuiPaper-root
.另一种选择是使用 Dialog 的 PaperComponent
prop并为其提供样式 Paper
成分。第三种选择是利用 MuiDialog-paper
CSS class .
所有三种方法都显示在下面的示例中。
import React from "react";
import Button from "@material-ui/core/Button";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Paper from "@material-ui/core/Paper";
import styled from "styled-components";
const StyledDialog = styled(Dialog)`
& > .MuiDialog-container > .MuiPaper-root {
background-color: purple;
}
`;
const StyledDialog2 = styled(Dialog)`
& .MuiDialog-paper {
background-color: blue;
}
`;
const StyledPaper = styled(Paper)`
background-color: green;
`;
export default function SimpleDialogDemo() {
const [open1, setOpen1] = React.useState(false);
const [open2, setOpen2] = React.useState(false);
const [open3, setOpen3] = React.useState(false);
return (
<div>
<Button variant="outlined" color="primary" onClick={() => setOpen1(true)}>
Open dialog using child selectors
</Button>
<Button variant="outlined" color="primary" onClick={() => setOpen3(true)}>
Open dialog using MuiDialog-paper
</Button>
<Button variant="outlined" color="primary" onClick={() => setOpen2(true)}>
Open dialog using custom Paper
</Button>
<StyledDialog
onClose={() => setOpen1(false)}
aria-labelledby="simple-dialog-title"
open={open1}
>
<DialogTitle id="simple-dialog-title">
Paper styled via child selectors
</DialogTitle>
</StyledDialog>
<StyledDialog2
onClose={() => setOpen3(false)}
aria-labelledby="simple-dialog-title"
open={open3}
>
<DialogTitle id="simple-dialog-title">
Paper styled via MuiDialog-paper
</DialogTitle>
</StyledDialog2>
<Dialog
onClose={() => setOpen2(false)}
aria-labelledby="simple-dialog-title"
open={open2}
PaperComponent={StyledPaper}
>
<DialogTitle id="simple-dialog-title">
Paper styled via custom Paper component
</DialogTitle>
</Dialog>
</div>
);
}
关于reactjs - MaterialUI for React with Styled-Components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60063602/