Reactjs 如何使按钮在反应中正确浮动？

我正试图让添加服务器按钮移动到屏幕的最右侧。既然React中不存在float:right，那么最好的方法是什么

我制作了一个名为ServerNavButtonRapper的包装器，尝试在左侧添加填充，但这似乎有点粗糙。我还尝试在两个h3标题周围添加一个包装器，然后flex增长了：1但这不起作用，最终将它们挤压成列。谢谢你的帮助

<div className={classes.serverNav}>
      <h3 className={classes.title}>Current Servers</h3>
      <h3 className={classes.title}>All Servers</h3>

      <div className={classes.serverNavButtonWrapper}>
        <Button
          className={classes.serverNavButton}
          variant="outlined"
          size="medium"
          color="default"
        >
          <AddIcon /> Server
        </Button>
      </div>
    </div>

当前服务器
所有服务器
浮动属性是CSS属性的主要属性

您可以通过
style
属性将样式表传递给React组件，例如：

文本

这里有两个花括号，因为
style
的参数类型是一个对象，您正在初始化它

因此，您的代码应该如下所示：


当前服务器
所有服务器
服务器
如果您将flex项目的边距设置为“自动”，它将增长到最大可用空间。因此，以下内容将实现此目的：

.serverNav {
  display: flex;
}

.serverNavButtonWrapper {
  margin-left: auto;
}

或者，如果您不再需要包装器：

.serverNav {
  display: flex;
}

.serverNavButton {
  margin-left: auto;
}

非常感谢！