I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog.
https://i.stack.imgur.com/13doLm.png
In regular CSS, you could achieve this with:
.MuiDialog-root .MuiButton-root {
border: 5px solid blue;
}
However, I am struggling to implement this in theme overrides:
theme.overrides = {
MuiDialog: {
root: {
border: "7px solid red",
"& .MuiButton": { border: "5px solid blue" }
}
}
};
Unfortunately, this code did not successfully apply the style to the button.
Can someone help me figure out if it is possible to override the style of a MUI button only when it's a descendant of a specific Mui component?