如何将容器的 maxWidth 设置为 100% >> 全局答案

【问题标题】：How to set maxWidth of Container to 100% >> Globally如何将容器的 maxWidth 设置为 100% >> 全局
【发布时间】：2020-09-10 01:04:22
【问题描述】：

每当我在 material-ui 中使用容器时，我都必须手动将 maxWidth 设置为 false。由于我认为我永远不会要求容器的 maxWidth 为可用空间的 100%，而且我希望容器能够正常工作，因此我想在我的 react 应用程序中全局设置它。

我每次都要做的事情

import React from "react";
import Container from "@material-ui/core/Container";
import Paper from "@material-ui/core/Paper";

export default function App() {
  return (
    <Container maxWidth={false}>
    .
    .
    .
    </Container>
  );
}

我尝试在 createTheme 中设置它，但它不起作用。

const theme = createMuiTheme({
      overrides: {
        MuiContainer: {
          root: {
            maxWidth: `100%`,
          },
        },
      },
    });

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

与其尝试覆盖 CSS，最简单的方法是为 prop 设置默认值：

const theme = createMuiTheme({
  props: {
    MuiContainer: {
      maxWidth: false
    }
  }
});