如何使用样式组件定位 Material UI Dialog 的背景颜色属性？

Question

我正在寻找Dialog使用样式组件更改Material UI 组件背景的颜色。

我找到了关于如何做到这一点的线程，但我不确定如何将其应用于样式组件。

我目前有一个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”）引用背景：

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

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

Answer 3

BackdropProps现已弃用，您可以componentsProps.backdrop使用

<Dialog componentsProps={{ backdrop: { style: { backgroundColor: "transparent" } } }} />