如何在React.js中为自定义Button组件设置position:absolute定位

根据你的代码，有几个可行的方式添加position:absolute定位，下面是具体实现：

方案1：通过自定义className扩展样式（推荐） #

你的Button组件已经支持接收剩余属性...props，只需修改组件内部的className拼接逻辑，把外部传入的className合并进去，就能灵活添加定位样式：

首先修改Button组件的两处className代码：

// 有href的<a>标签部分
className={`font-secondary text-xs md:text-base flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300 ${
  disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'
} ${props.className || ''}`}

// 无href的<button>标签部分
className={`font-secondary text-xs md:text-base flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300 ${
  disabled && 'cursor-not-allowed opacity-70'
} ${props.className || ''}`}

之后使用Button时，直接传入包含定位的类（比如用Tailwind语法或自定义CSS类）：

<Button href={LINKS.application} external className="absolute top-4 right-4">
  Join today!
</Button>

方案2：给所有Button默认添加绝对定位 #

如果希望所有Button组件都默认使用绝对定位，直接把absolute类加到组件的基础className里：

// 以<button>标签为例，<a>标签做同样修改
className={`absolute font-secondary text-xs md:text-base flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300 ${
  disabled && 'cursor-not-allowed opacity-70'
}`}

方案3：通过内联style属性传递 #

无需修改组件代码，直接在使用时传入style属性设置定位：

<Button 
  href={LINKS.application} 
  external 
  style={{ position: 'absolute', top: '16px', right: '16px' }}
>
  Join today!
</Button>

⚠️ 注意：绝对定位元素需要以非static定位的父元素作为参考基准，否则会相对于整个文档定位，记得给Button的父容器设置position: relative或其他定位属性。

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