return (
    <div style={{}}>
        <div style={{float: 'right'}}>
            <Button>Logout</Button>
        </div>
       <div style={{clear: 'both'}}></div>
        <div>
           {Main components here}
        </div>
    </div>
);

试试看，还有，这不是一个React问题，它应该标记为CSS

您可以简单地使用flex-box

#button{
  display: flex;
  justify-content: flex-end;
}

<div>
  <div id='button'>
    <button> some button</button>
  </div>
  <div>
    <p> Main conent section </p>
  </div>
</div>

你可以设置按钮显示为 inline-block 或 inline。这将使按钮的行为像普通文本一样。在上面的步骤之后，设置按钮立即div的文本对齐属性为 right。希望这能有所帮助。
<div style="text-align:right"> <button style="display:inline-block">click me</button> </div>

就像这样试试。

<div style={{ display: "flex", justifyContent: 'flex-end'}}>

      <Button onClick={() => this.logout()}>
        Logout
      </Button>

</div>

或者

<div style={{ display: "flex" }}>
    <Button style={{ marginLeft: "auto" }}  onClick={() => this.logout()}>
      Logout
    </Button>
</div>

您可以轻松地在样式文件中创建一个类，如下所示：

.flex_end   {
    @include styleclass('flex justify-content-end');
    }

然后将其添加到按钮定义中，如下所示：

<div className='col-12 p-0 pb-1 flex_end'>
    <Button                            
    icon='pi pi-arrow-up-left'
    className='p-button-sm '
    onClick={() => onSelectPrinter()}
    type='button'
    />
</div>

希望这个有用。

This is very simple and useful. Thanks

return (
    <div>
        <div style={{display: 'flex', justify-content: 'flex-end'}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);