如何在react js中为该按钮添加position:absolute

Question

我想在这行代码中添加position:absolute，但我不确定在react js中是否可能。

<Button href={LINKS.application} external>
Join today!
</Button>

如果可以添加位置：绝对在该行内，请告诉我如何添加。

这是我的按钮组件中的代码：

export type ButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
iconName?: SupportedIcons
external?: boolean
href?: string
target?: HTMLAttributeAnchorTarget
}
const Button: React.FC<ButtonProps> = ({ children, external, iconName, disabled, href, target, ...props }) => {
if (href)
return (
<Link href={href}>
<a
href={href}
target={target ?? (external ? '_blank' : '_self')}
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'
}`}
>
{!!iconName && <Icon iconName={iconName} />}
<span>{children}</span>
{external && <Icon iconName="arrow" />}
</a>
</Link>
)
return (
<button
{...props}
disabled={disabled}
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'
}`}
>
{!!iconName && <Icon iconName={iconName} />}
{children}
{external && <Icon iconName="arrow" />}
</button>
)
}

我希望这有助于了解我可以在哪里添加定位。感谢

Answer 1

正如许多评论所说，Button是一个组件，我不知道你从哪里得到它，所以它可能是固执己见的，不会接受内联样式，但如果Button充当css按钮，你会如何做到这一点。

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

然后只需更改top和right的值，或者根据需要写bottom或left。祝你好运

Answer 2

<Button style={{position:"absolute"}} href={LINKS.application} external>Join today!
</Button>

它可以这样做，作为内联样式的