網格項目中的材質 UI 按鈕 - 嘗試向右浮動

Question

我正在嘗試向右浮動以下按鈕，但不確定如何使用 material-ui 執行此操作：

         <Grid item xs={2}>
            <Button
              variant="contained" 
              color="secondary"
              disableElevation
              startIcon={(<DeleteOutlineIcon size="0.9rem"/>)}
              onClick={() => arrayHelpers.remove(index)}  
            >
              Remove
            </Button>}                    
          </Grid>

也不確定我是否需要實際向此按鈕添加 padding-left 但想看看是否有更好更清潔的方法。

我也試過justify="flex-end"但不幸的是沒有幫助。

Answer 1

使用以下 class 和樣式將包裝 div 添加到您的按鈕：

<Grid item xs={2}>
          <div className="my-class">
            <Button
              variant="contained"
              color="secondary"
              disableElevation
              startIcon={<AccessAlarmIcon size="0.9rem" />}
              onClick={() => {}}
            >
              Remove
            </Button>
          </div>
        </Grid>

樣式.css：

.my-class {
  display: flex;
  justify-content: flex-end;
}

Answer 2

這是我的解決方案：

<Grid      
  container
  direction="row"
  justify="flex-end"
  alignItems="center"
>
  <Button
    variant="contained" 
    color="secondary"
    disableElevation
    startIcon={(<DeleteOutlineIcon size="0.9rem"/>)}
    onClick={() => console.log("Button is clicked")}  
  >
    Remove
  </Button>                  
</Grid>

單擊此處在 CodeSandbox 進行演示