MaterialUI for React with Styled-Components - reactjs

Question

I want to style the Paper of MaterialUI's Dialog
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.
Is there any way of scoping this styling only to the Paper used by the first Dialog?

Answer 1

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. Another option is to use Dialog's PaperComponent prop and provide it with a styled Paper component. A third option is to leverage the MuiDialog-paper CSS class.
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>
);
}

Answer 2

Try this:
const StyledDialog = styled(Dialog)`
& > .MuiPaper-root {
width: 600px;
}
`;
css > operator will take only childs that are direct childs of the dialog component. If that is not ok look at other css operators: https://www.w3schools.com/cssref/css_selectors.asp