Material UI Flexbox 问题答案

【问题标题】：Material UI Flexbox issueMaterial UI Flexbox 问题
【发布时间】：2019-09-20 11:45:30
【问题描述】：

我有一个问题，由于某种原因，网格元素的最大宽度被设置为 16%，但我不知道为什么。这是在一个使用 sass、jss 和 Material UI 的反应应用程序中。它在本地也可以正常工作，但是当我构建应用程序并将其投入生产时，问题就会出现（这使得调试变得非常“有趣”。我不太确定是什么原因造成的。

import React from "react";

// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import Grid from "@material-ui/core/Grid";

const style = {
  grid: {
    margin: "0 -15px",
    width: "calc(100% + 30px)"
    // '&:before,&:after':{
    //   display: 'table',
    //   content: '" "',
    // },
    // '&:after':{
    //   clear: 'both',
    // }
  }
};

function GridContainer({ ...props }) {
  console.log('GridContainer', props)
  const { classes, children, className, ...rest } = props;

  let formattedClassName = className ? className : ''

  return (
    <Grid container {...rest} className={classes.grid + " " + formattedClassName + " " + 'classes-grid'}>
      {children}
    </Grid>
  );
}

export default withStyles(style)(GridContainer);

我在应用程序的任何地方都没有 min-width: 600，所以我不确定这是从哪里来的。

任何人都知道这个问题，甚至是调试它的好方法吗？（我已经在这里待了好几个小时了）

添加 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Manager</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

【问题讨论】：

media (min-width: 600px) 来自material-ui css

标签： reactjs sass material-ui jss

【解决方案1】：

我在尝试使用 material-ui 制作我的应用程序的生产版本时遇到了类似的问题。我设法通过添加这样的JSS Provider 来解决，看看它是否有效：

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}

【讨论】：

绝对是个好建议，但不幸的是，这对我不起作用。还有其他想法吗？
我曾经遇到过关于 index.html 的问题，我使用 react-create-app 生成了我的项目，并且由于某种原因，某些配置限制了屏幕尺寸，因此我的组件尺寸和边距，你可以看看那里
我添加了我的 index.html 内容。我尝试删除视口的东西，但这也不起作用。有什么让你印象深刻的吗？
Huuum，什么都没注意到，可以试试<body style="width: 100%;">
我不明白的是，为什么您在使用 Flexbox 时遇到问题，但使用 Grid。我在我的应用程序中像这样使用Flexbox：<Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center" minHeight='calc( 100vh - 12rem )'>。您可以在此处添加宽度配置或其他配置