2
votes

Comment remplacer Material UI .MuiContainer-maxWidthLg?

J'essaie de me débarrasser de la largeur maximale présente dans le thème.
Voici ce que je vois dans Chrome (et si je le décoche, il fait ce dont j'ai besoin):

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

Comment puis-je faire ceci? J'ai essayé quelque chose comme ça:

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

mais cela ne semble pas avoir d'effet ... Comment puis-je annuler cela?

Merci,

Alex

reactjs css material-ui overriding

2 commentaires

puis-je voir votre code?

Salut, merci pour votre réponse. J'ai réussi à le remplacer en définissant ce qui suit dans un élément parent: '& .MuiContainer-maxWidthLg': {maxWidth: '100%'},

3 Réponses :

0
votes

Eh bien, définir ce qui suit dans un div parent a fonctionné:

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

0 commentaires

3
votes

La prop maxWidth de Container est par défaut «lg» , mais vous pouvez empêcher Material-UI d'essayer de contrôler la largeur maximale du Container en définissant maxWidth={false} .

Voici un exemple simple:

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>
  );
}

Documentation associée: https://material-ui.com/api/container/#props

Référence de code: https://github.com/mui-org/material-ui/blob/v4.9.13/packages/material-ui/src/Container/Container.js#L88

0 commentaires

0
votes

Vous pouvez toujours y parvenir avec makeStyles :

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

0 commentaires