css - 网格项目中的材质 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"，不幸的是没有帮助。

标签： cssreactjsbuttonmaterial-ui

Answer 1

这是我的解决方案：

<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 进行演示