Material UI Snackbar 重叠

Question

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

请在下面找到 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}
      />

Answer 1

我在使用 React 和 Material UI 时遇到了这个问题，当引入两个小吃店时，一个相互重叠。 我解决了修改 index.css 中 mui 根小吃店的第二个孩子

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

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

Answer 2

仅从屏幕截图来看，我无法 100% 判断，但您似乎刚刚通过以下方式使Snackbar变得透明：

backgroundColor: 'transparent'

所以你实际上是看穿了它。

要解决此问题，您应该为组件指定backgroundColor ，或删除“透明”覆盖，例如：

backgroundColor: '#bada55'

您可能需要查看withStyles/withTheme HOC ，以便在一个地方声明您的颜色并在不同的组件中重用它们，在这种情况下，您将拥有如下内容：

backgroundColor: theme.palette.my.predefined.color