Question

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

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

- ＆GT;在此提交之前，宽度：'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}
      />

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

3 个答案: