如何让snackbar在小屏幕中占据全角？

Posted 2023-02-23

【中文标题】如何让snackbar在小屏幕中占据全角？

【英文标题】：How to make the snackbar take full-width in small screens?

【发布时间】：2017-10-24 15:05:45

【问题描述】：

因为这个提交： https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2

小吃栏在移动屏幕中不会占据 100% 的宽度。任何人都可以帮助在小屏幕的情况下如何仍然给出 100% 的宽度？

-> 在这次提交之前，width:'auto' 成功了，但现在不行了。

感谢任何帮助。

【参考方案1】：

宽度对我不起作用，因为它不知道为什么。尽管我设置为 100%，但宽度仅采用默认值。我可以使用 minWidth 应用全宽，并且我使用的是 material-ui 版本：0.18.7。您必须覆盖 minWidth 值才能应用自定义宽度。请在下面找到示例

import Snackbar from 'material-ui/Snackbar';

const bodyStyle = 
  border: `2px solid $config.actualWhite`,
  height:55,
  minWidth: 1385,
  background: config.snackbarColor,
  fontFamily: config.fontFamily,
  fontStyle: config.fontStyle,
  fontWeight: config.fontWeight,
  fontSize: config.fontSize,
  borderBottomRightRadius: 46,
  borderBottomLeftRadius: 46


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

【参考方案2】：

我想通了，只需要在 bodyStyle 属性中传入 width: '100%'，它会覆盖它。

【讨论】：

Github 订阅问题可以在github.com/angular/material2/issues/1951 找到。这似乎不适用于使用openFromComponent 打开的小吃店，并且似乎仅使用open 时可能已修复

【参考方案3】：

您可以使用媒体查询：

@media only screen and (max-width : 480px) 
  .yourClass  width: 100%; 

【讨论】：

它提供了内联样式，并且在 prop 中不使用类名。我想出了解决方案并发布了它。我们需要使用 bodyStyle 属性。