如何让小吃店在小屏幕上全宽？

Question

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

小吃店在移动屏幕上不占用100％的宽度。任何人都可以帮助如何在小屏幕的情况下仍然给出100％的宽度？

- >在此提交之前，宽度：'auto'完成了诀窍，但现在不再有了。

任何帮助表示赞赏。

Answer 1

好吧，我想通了，只需要在bodyStyle道具中传递{width：'100％'}，它就会覆盖它。

Answer 2

您可以使用媒体查询：

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

Answer 3

宽度对我不起作用，因为它没有影响不确定原因。虽然设置为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}
      />