Как переопределить 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
        }, 

, но похоже, что это не имеет никакого эффекта ... Как я могу это изменить?

Спасибо,

Alex

Answer 1

Опора maxWidth для Container по умолчанию имеет значение 'lg' , но вы можете предотвратить попытки Material-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

Ну, установка следующего в родительском div сработала:

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