Type '{ |cssProperties|}' is not assignable to type 'Properties<string | number, string & {}>' in React

Question

I have this code:

const linkStyle = {
 color: '#8954A8',
 fontWeight: 'bold',
 fontSize: 16,
 verticalAlign: '5%',
};

const IndexPage: React.FunctionComponent = () => {
 return (
    <>       
     <a style={linkStyle} href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}>link </a>
    </>  
}

I am getting this problem:

Type '{ color: string; fontWeight: string; fontSize: number; verticalAlign: string; }' is not assignable to type 'Properties<string | number, string & {}>'.ts(2322) index.d.ts(1842, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'

how can fix it and why is the reason of my problem?

Answer 1

It's a little mismatch in typing of TypeScript. You would need to add CSSProperties interface for the style object.

import { CSSProperties } from "react";

const linkStyle: CSSProperties = {
  color: "#8954A8",
  fontWeight: "bold",
  fontSize: 16,
  verticalAlign: "5%"
};

Working Sample: