如何覆盖 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

好吧，在父项中设置以下内容 div 有效：

'& .MuiContainer-maxWidthLg' : {
      maxWidth: '100%'
},

Answer 2

Container defaults to 'lg' 的 maxWidth 属性，但是你可以防止 Material-UI 试图控制 [=12] 的最大宽度=] 通过设置 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 3

您仍然可以通过 makeStyles 实现此目的：

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.up('lg')]: {
      maxWidth: <YourMaxWidth>px,
    },
  },
}))

Answer 4

如果 material UI 假设默认值不适合您，则可以根据您的需要相应地填写以下值。

    const theme = createMuiTheme({
      breakpoints: {
        values: {
          xs: ,
          sm: ,
          md: ,
          lg: ,
          xl: ,
          xxl:
        }
      }
    });
    
    export default theme;


//And add to app.js

import { ThemeProvider } from "@material-ui/core/styles";
import theme from "style/theme";

 <ThemeProvider theme={theme}>
    //yourCode
 </ThemeProvider>

Answer 5

嗯，在 22.11.2021 这样工作

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

Answer 6

如果您想进一步自定义 lg 断点，此代码段可能会有所帮助。我在这里遵循全局主题覆盖指南：https://mui.com/customization/theme-components/

这适用于 MUI 5.4.3

import { createTheme } from "@mui/material/styles";

let theme = createTheme({});
theme = createTheme(theme, {
    components: {
        MuiContainer: {
            styleOverrides: {
                maxWidthLg: {
                    [theme.breakpoints.up('lg')]: {
                        maxWidth: // Your custom value here
                    },

                    // Note that you can customize other properties here, like padding, color, .etc.
                }
            }
        }
    })

如何覆盖 Material UI .MuiContainer-maxWidthLg？

How to override Material UI .MuiContainer-maxWidthLg?

css

overriding

reactjs

material-ui