如何覆盖 Material UI .MuiContainer-maxWidthLg？

Question

我试图摆脱主题中存在的最大宽度。
这是我在 Chrome 中看到的（如果我取消选中它，它会做我需要的）：

@media (min-width: 1280px)
.MuiContainer-maxWidthLg {
    max-width: 1280px;
}

我怎样才能做到这一点？我试过这样的事情：

const useStyles = makeStyles(theme => ({
    root: {       
        '& .MuiContainer-maxWidthLg' : {
             maxWidth: //No matter what I put here, it does not work
        }, 

但它似乎没有任何效果......我该如何覆盖它？

谢谢，

亚历克斯

Answer 1

的maxWidth的道具Container 默认为“LG”，但可以防止材料的UI试图控制的最大宽度Container的设置maxWidth={false}。

这是一个简单的例子：

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}>
      <Paper>
        <h1>Hello CodeSandbox</h1>
      </Paper>
    </Container>
  );
}

相关文档：https : //material-ui.com/api/container/#props

代码参考：https : //github.com/mui-org/material-ui/blob/v4.9.13/packages/material-ui/src/Container/Container.js#L88

Answer 2

好吧，2021年11月22日这样工作

<Container sx={{ maxWidth:'100%'  }} maxWidth={false} >