如何在TypeScript React中将按钮固定在页面底部居中位置？

解决方案 #

要实现按钮固定在页面底部居中、不随页面滚动变化，核心是用CSS的fixed定位，两种实现方式如下：

方案1：直接给Button组件添加定位样式（推荐）

如果你用的是Material UI的Button组件，直接用sx属性注入样式即可：

<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"
    sx={{
        position: 'fixed',
        bottom: 20, // 可自定义距离底部的像素值
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 9999 // 避免被其他页面元素遮挡
    }}
/>

方案2：外层套定位容器

如果你的Button组件不支持直接传入样式属性，在外层加一个div容器做定位即可：

<div style={{
    position: 'fixed',
    bottom: 20,
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    zIndex: 9999
}}>
    <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>

之前方案失效的原因 #

1. Material UI的Container组件的fixed属性作用是限制容器最大宽度随响应式断点变化，不是让容器相对于视口固定定位，不符合你的需求。
2. CSS原生float属性仅支持left/right/none三个有效值，不存在center取值，所以添加后不会生效。

内容的提问来源于stack exchange，提问作者SKJ