MUI – Wie richte ich eine Komponente mittig/rechts aus?

Lesezeit: 3 Minuten

Benutzeravatar von Vedant Agarwala
Vedant Agarwala

Ich möchte meine Schaltfläche rechts vom übergeordneten Element ausrichten.

Ich habe mich gefragt, ob es eine gibt richtig wie man es in MUI macht. Ich könnte benutzen:

<Grid container justify="flex-end">

Aber dann müsste ich einen anderen nehmen <Grid item />. Scheint zu viel Arbeit zu sein.

Oder vielleicht bin ich einfach besser dran, einfaches altes CSS zu verwenden und damit herumzuspielen float: right und Umgang mit der scheinbaren Nullhöhe des Elements.

Benutzeravatar von ThomasP1988
ThomasP1988

VOR MUI 5:

Versuche dies

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

UPDATE MUI 5: (Dank an Dipak)

Die Requisite justify von ForwardRef(Grid) ist veraltet. Verwenden justifyContent Stattdessen wurde die Requisite umbenannt.

<Grid container justifyContent="flex-end">
     <Button>Example</Button>
</Grid>

Update: Die beste Lösung ist die Antwort von NearHuscarl, Sie sollten besser Stack als Grid verwenden.

  • Was ist, wenn sich zwei Grid-Elemente im Container Grid befinden und ich nur das zweite rechts ausrichten möchte?

    – Imran Ahmad

    21. April 2021 um 19:17 Uhr

  • Dann wandeln Sie Ihr Element in einen Container um (ein Raster kann beides sein), sodass Ihr Element etwa so aussehen würde:

    – ThomasP1988

    22. April 2021 um 7:20 Uhr

  • Hinzufügen <Grid item xs={12} sm={6} container justifyContent="flex-end"> hat bei mir funktioniert. Musste verwenden justifyContent

    – Prachar

    3. Februar um 22:47 Uhr

Wenn Sie Elemente innerhalb der ausrichten möchten <Grid item> Sie können eine Verpackung verwenden Box Komponente wie folgt:

<Grid container>
  <Grid item sm={6}>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

Siehe die Dokumente für weitere Positionierungsmöglichkeiten.

Im MUI v5können Sie verwenden Stack um eine Reihe von Komponenten in einer Zeile oder Spalte anzuzeigen. Stack ist eine flexbox also musst du die nur einstellen justifyContent prop zum Ausrichten des Elements im Inneren:

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

Codesandbox-Demo

Wer die Grid-Komponente nicht nutzen möchte, muss auf CSS zurückgreifen.

Aber wenn Sie Material-UI verwenden, sollten Sie JSS (CSS-IN-JS) und kein einfaches CSS verwenden.

In CSS können Sie zum Beispiel jede dieser Lösungen verwenden. “text-align” ist das einfachste.

  • text-align: right
  • float: right
  • Flexbox
    • Eltern mit: display: flex
    • Kind mit: align-content: flex-end

Verwenden Sie die Box-Komponente mit Flex.

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

Sie können mehr erfahren hier

Für die neueste Material-UI-Version 5 Verwenden Sie justifyContent=”flex-end” oder alignContent, was css text-align und flex-end=right entspricht

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justifyContent="flex-end">
         <Button>Example</Button>
    </Grid>

Für die alte Material-UI-Version 4

    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>

Benutzeravatar von Sailist
Segler

            <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
                <Typography sx={{ fontWeight: 600 }}>
                    Recent Repositories
                </Typography>
                <Box>
                    {/* <Typography></Typography> */}
                    <Button error>+ New</Button>
                </Box>
            </Toolbar>

1430690cookie-checkMUI – Wie richte ich eine Komponente mittig/rechts aus?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy