[英]MaterialUI for React with Styled-Components
I want to style the Paper
of MaterialUI's Dialog
我想为 MaterialUI 的
Dialog
的Paper
设置样式
const StyledDialog = styled(Dialog)`
& .MuiPaper-root {
width: 600px;
}
`;
However, this means that all elements nested inside the Dialog that have the MuiPaper-root
class (for example, other Papers) will inherit it.但是,这意味着所有嵌套在具有
MuiPaper-root
类的 Dialog 内的元素(例如,其他 Papers)都将继承它。
Is there any way of scoping this styling only to the Paper used by the first Dialog?有什么方法可以将此样式范围限定为第一个对话框使用的纸张?
There are a several ways to approach this.有几种方法可以解决这个问题。 One approach is to use child selectors (as mentioned in Kaca992's answer), but the
Paper
is not a direct child of the Dialog
so to use this approach you need & > .MuiDialog-container > .MuiPaper-root
.一种方法是使用子选择器(如 Kaca992 的回答中所述),但
Paper
不是Dialog
的直接子级,因此要使用这种方法,您需要& > .MuiDialog-container > .MuiPaper-root
。 Another option is to use Dialog's PaperComponent
prop and provide it with a styled Paper
component.另一种选择是使用Dialog的
PaperComponent
道具,并为其提供一个风格的Paper
组件。 A third option is to leverage the MuiDialog-paper
CSS class .第三种选择是利用
MuiDialog-paper
CSS 类。
All three approaches are shown in the example below.所有三种方法都显示在下面的示例中。
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>
);
}
Try this:尝试这个:
const StyledDialog = styled(Dialog)`
& > .MuiPaper-root {
width: 600px;
}
`;
css > operator will take only childs that are direct childs of the dialog component. css > 操作符将只采用对话框组件的直接子项的子项。 If that is not ok look at other css operators: https://www.w3schools.com/cssref/css_selectors.asp
如果这不行,请查看其他 css 运算符: https : //www.w3schools.com/cssref/css_selectors.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.