Reactjs 材质UI蛇形条重叠

我正在使用材质UI Snackbar。我对材质UI不是很陌生，但不知何故我无法解决这个问题，即当snackbar出现在屏幕顶部时，它是重叠的。我尝试了不同的方法来修复它，但没有成功

请查找下面的Snackbar组件及其主体样式。另外，请查看此屏幕截图：

bodyStyle:{
  border: "2px solid #ffffff",
  minWidth: '50%',
  maxWidth: '100%',
  flexGrow: 0,
  height:'55px',
  backgroundColor: 'transparent',
  fontFamily: "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif",
  fontStyle: 'normal',
  fontWeight: 400,
  fontSize: 16
} 
snackbarfromTop: {
  top: 0,
  color: white,
  bottom: 'auto',
}

<Snackbar
        open={this.state.open}
        message={this.state.error}
        autoHideDuration={4000}
        bodyStyle={myTheme.bodyStyle}
        action="Close"
        onRequestClose={this.handleRequestClose}
        onActionTouchTap={this.handleRequestClose}
        style={myTheme.snackbarfromTop}
      />

车身风格：{
边框：“2px实心#ffffff”，
最小宽度：“50%”，
maxWidth:“100%”，
flexGrow:0，
高度：'55px'，
背景色：“透明”，
fontFamily：“开放式无衬线、无衬线、无衬线、无衬线、无衬线、无衬线”，
fontStyle:'正常'，
体重：400，
字体大小：16
} 
snackbarfromTop：{
排名：0，
颜色：白色，
底部：“自动”，
}

仅从屏幕截图来看，我不能说100%，但似乎您刚刚通过以下方式使您的

Snackbar

透明：

backgroundColor: 'transparent'

所以你实际上是看穿了它

要解决此问题，应为组件指定

backgroundColor

，或删除“透明”覆盖，例如：

backgroundColor: '#bada55'

您可能希望查看，以便在一个位置声明颜色，并在不同的组件中重用它们，在这种情况下，您将有如下内容：

backgroundColor: theme.palette.my.predefined.color

---

我在使用react和MaterialUI时遇到了这个问题，当引入两个SnackBar时，其中一个互相重叠。我解决了在index.css中修改mui根snackbar的第二个子项的问题

#root .MuiSnackbar-anchorOriginBottomCenter:nth-child(2){
    bottom: 92px!important;
}

这显然取决于您为snackbar选择的位置，并相应地进行调整