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

使用以下类和样式将包装 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>

style.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>

Click here for Demo at CodeSandbox

网格项中的材质 UI 按钮 - 尝试向右浮动

2 个答案: