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

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.

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.

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>

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.

• Einführung : https://material-ui.com/customization/css-in-js/
• Vorteile : http://cssinjs.org/benefits

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>

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