Wie richte ich eine Komponente mit der Material-Benutzeroberfläche in der Mitte/rechts aus?

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

Ich habe mich gefragt, ob es eine gibt richtig Möglichkeit, dies in der Material-Benutzeroberfläche zu tun. Ich könnte benutzen:

<Grid container justify="flex-end">

Aber dann müsste ich ein anderes verwenden <Grid item />. Scheint zu viel Arbeit zu sein.

Oder vielleicht ist es für mich einfach besser, einfaches altes CSS zu verwenden und damit herumzuspielen float: rightund Umgang mit der scheinbaren Nullhöhe des Elements.

VOR Material UI 5:

Versuche dies

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

UPDATE Material UI 5: (Danke 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 besten Lösungen sind die Antworten von NearHuscarl oder Eduardo Oviedo Blanco. Sie verwenden lieber Stack oder Box als Grid.

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.

In Material-Benutzeroberfläche v5können Sie verwenden Stack um eine Reihe von Komponenten in einer Zeile oder Spalte anzuzeigen. Stack ist eine Flexbox, sodass Sie nur die festlegen müssen justifyContent prop, um das Element darin auszurichten:

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

Wenn Sie die Grid-Komponente nicht verwenden möchten, müssen Sie auf CSS zurückgreifen.

Wenn Sie jedoch 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 beispielsweise jede dieser Lösungen verwenden. „text-align“ ist die einfachste Variante.

• text-align: right
• float: right
• Flexbox
  • Elternteil 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

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

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 alte Material-UI-Version 4

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