How do I add inline styling in React JS-CodePudding

I am having trouble re positioning this button without moving all the buttons on the entire site. Here is the code I want to add inline styling. For example i want to add the button positioning as "absolute".

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

Here is the button component code:

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>
    )

Please let me know if you have a solution

CodePudding user response：

Like this:

<div style={{color:"red"}}>foobar</div>

And for the next time: If you google "react inline style" and click on the first link you will probably find your answer.

CodePudding user response：

A better method would be to use a classname that references a CSS file or module.

However it can be accomplished with <button style={{position:"absolute"}}>Hey I'm a button</button>

Generally using position absolute in this context is likely not best practice as well.