Unable to add dynamic style in styled component. I am getting type error-CodePudding

Here I am adding dynamic style to my custom styled components.

    <A
      href={link || undefined}
      style={{ pointerEvents: `${disabled ? 'none' : 'all'}` }}
    >

When I use simply style={{ pointerEvents: 'none' }} it is working fine. But trying to make dynamic, then I am getting the following error:

[!] (plugin rpt2) Error: C:/Users/src/Wizard/Wizard-v2/WizardStep.tsx(232,16): semantic error TS2769: No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "slot" | ... 262 more ... | "referrerPolicy"> & { ...; }, "slot" | ... 263 more ... | "referrerPolicy"> & Partial<...>, "slot" | ... 263 more ... | "referrerPolicy"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type 'string' is not assignable to type '"fill" | "stroke" | "none" | "auto" | "inherit" | "initial" | "all" | "-moz-initial" | "revert" | "unset" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke" | undefined'. Overload 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type 'string' is not assignable to type '"fill" | "stroke" | "none" | "auto" | "inherit" | "initial" | "all" | "-moz-initial" | "revert" | "unset" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke" | undefined'.

What's wrong in this?

CodePudding user response：

You don't need template string, just write it like this.

pointerEvents: disabled ? 'none' : 'all'

CodePudding user response：

  style={{ pointerEvents: disabled ? 'none' : 'all' }}

Styled-components has another way to style using props that might be good to know. https://styled-components.com/docs/basics#passed-props

CodePudding user response：

Try this

<A
      href={link || undefined}
      style={{ pointerEvents: disabled ? 'none' : 'all' }}
>

CodePudding user response：

Try this

 <A
      href={link || undefined}
      style={{ pointerEvents: disabled ? 'none' : 'all'}  }}
    >

In reactJS, you don't have to put the variable inside a literal string