Css 如何使snackbar在小屏幕上全宽显示？

由于这一原因：

snackbar在移动屏幕上并没有占据100%的宽度。对于小屏幕的情况，如何仍能提供100%的宽度，有人能提供帮助吗

->在这次提交之前，width:'auto'起了作用，但现在不再起作用了

---

非常感谢您的帮助。

您可以使用媒体查询：

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

---

您可以使用媒体查询：

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

---

我想出来了，只需要在bodyStyle道具中传入{width:'100%}，它覆盖了它。

我想出来了，只需要在bodyStyle道具中传入{width:'100%}，它覆盖了它。

width对我不起作用，不知道为什么。宽度仅采用默认值，尽管我设置为100%。我可以使用minWidth应用全宽，我使用的是材质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}
      />

从“物料ui/Snackbar”导入Snackbar；
const bodyStyle={
边框：`2px solid${config.actualWhite}`，
身高：55，
最小宽度：1385，
背景：config.snackbarColor，
fontFamily:config.fontFamily，
fontStyle:config.fontStyle，
fontWeight:config.fontWeight，
fontSize:config.fontSize，
边界半径：46，
边界半径：46
}

宽度对我不起作用，因为它不起作用，不知道为什么。宽度仅采用默认值，尽管我设置为100%。我可以使用minWidth应用全宽，我使用的是材质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}
      />

从“物料ui/Snackbar”导入Snackbar；
const bodyStyle={
边框：`2px solid${config.actualWhite}`，
身高：55，
最小宽度：1385，
背景：config.snackbarColor，
fontFamily:config.fontFamily，
fontStyle:config.fontStyle，
fontWeight:config.fontWeight，
fontSize:config.fontSize，
边界半径：46，
边界半径：46
}

它提供了内联样式，并且在prop中不使用类名。我想出了解决方案并发布了。我们需要使用bodyStyle道具。它提供内联样式，并且道具中没有类名。我想出了解决方案并发布了。我们需要使用bodyStyle道具。有关订阅的Github问题，请访问。这似乎对使用

openFromComponent

打开的snackbar不起作用，而且似乎在仅使用

open

Github订阅时它可能已被修复。有关订阅的问题，请访问。这似乎对使用

openFromComponent

打开的snackbar不起作用，而且似乎在使用

open