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

user_16919673 0
Viewed 860

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>, 
HTMLAnchorElement>'

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

react-functional-component typescript reactjs
1 Answers

It's a little mismatch in typing of typescripts, 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:

Edit React typescript custom inline style

user_51226150
Related