如何使用样式化的组件来定位“材质UI对话框”的背景色属性？

Question

我希望使用样式化组件来更改Material UI的Dialog组件的背景颜色。

我发现了此thread的确切操作方法，但不确定如何将其应用于样式化组件。

我目前有这样的StyledDialog：

const StyledDialog = styled(Dialog).attrs({

  classes: { paper: 'container' },
  keepMounted: true,
  'aria-labelledby': 'alert-dialog-slide-title',
  'aria-describedby': 'alert-dialog-slide-description'
})`
  .container {
    border-radius: 0;
  }
`;

Answer 1

<Dialog BackdropProps={{style: {backgroundColor: 'white'}}}/>

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Dialog/Dialog.js

Answer 2

您可以通过以下方式通过其全局类（“ MuiBackdrop-root”）引用backdrop：

const StyledDialog = styled(Dialog)`
  .MuiBackdrop-root {
    background-color: lightgreen;
  }
`;

相关样式化组件文档：https://www.styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting