如何修复打字稿反应中按钮的位置答案

【问题标题】：How do I fix the position of a button in typescript react如何修复打字稿反应中按钮的位置
【发布时间】：2021-07-01 20:06:41
【问题描述】：

我正在尝试将我的按钮放置在 TypeScript React 中。这是我目前所拥有的：

<Button
    key="copy-to-clipboard"
    id="copy-to-clipboard"
    text="Copy"
    icon="file_copy"
    width={120}
    height={40}
    borderRadius={"3px"}
    onClick={copyToClipboard}
    margin="5px 10px"
/>

并且该按钮显示在我页面的左上角。我希望按钮位于页面的底部中心，并且是不可变的。

编辑：我尝试了以下方法，但我的尝试没有成功。

我导入了 Container 库

import { Container } from "@material-ui/core";

并拥有我的代码：

<Container fixed>
    <Button
         [same code as above]
     />
</Container>

我的想法是我可以将它放在一个容器中，然后我可以像那样移动按钮。我知道这是一种过于复杂的按钮定位方式，但我在按钮标签中添加的所有代码都不起作用。

我在按钮代码的边距下方添加了 float={center}，但这不起作用。

【问题讨论】：

按钮是您创建的组件还是来自库？
我创建了一个按钮菜单，但我相信它来自图书馆
如果这是一个 MaterialUI 按钮，它不会接受任何 CSS 属性作为道具，也不会接受 text 或 icon。 docs on styling 将是一个很好的起点。如果它是您的按钮组件并且您期待这些道具，那么在组件的接收端显示它们是如何被翻译成 CSS 的。对于它的价值，您所包含的任何伪 CSS 都无法完成这项工作（float: center 也不是有效的 CSS） - 也许您应该先尝试使用纯 HTML/CSS 来完成这项工作。
@lawrence-witt 感谢您的指点。我意识到这只是一个普通的 CSS 问题，而不是 react-js。无论哪种方式，我都解决了这个问题，感谢您的帮助。

标签： reactjs typescript react-redux

【解决方案1】：

所以这只是一个简单的 CSS 问题，这就是我所做的：

<div style={{position:"relative"}}>
    <div style={{position:"absolute", float: "right", bottom:-1170, right:0}}>
       <Button
          key="copy-to-clipboard"
          id="copy-to-clipboard"
          text="Copy"
          icon="file_copy"
          width={120}
          height={40}
          borderRadius={"3px"}
          onClick={copyToClipboard}
          margin="5px 10px"
        />
    </div>
</div>

【讨论】：