类型 '{ |cssProperties|}' 不可分配给 React 中的类型 'Properties<string | number, string & {}>'

Question

我有这个代码：

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>
    </>  
}

我遇到了这个问题：

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

如何解决它，为什么是我的问题的原因？

Answer 1

打字稿的输入有点不匹配，你需要为样式对象添加CSSProperties接口

import { CSSProperties } from "react";

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

工作样本：

类型 '{ |cssProperties|}' 不可分配给 React 中的类型 'Properties<string | number, string & {}>'

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

typescript

reactjs

react-functional-component