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

【问题标题】：How to make the snackbar take full-width in small screens?如何让snackbar在小屏幕中占据全角？
【发布时间】：2017-10-24 15:05:45
【问题描述】：

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

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

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

感谢任何帮助。

【问题讨论】：

标签： css reactjs material-ui snackbar

【解决方案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 属性。