\"对象字面量只能指定已知属性\" 错误答案

【问题标题】："Object literal may only specify known properties" error\"对象字面量只能指定已知属性\" 错误
【发布时间】：2022-11-15 23:50:09
【问题描述】：

我从这个 Codesandbox 示例下载了代码：https://codesandbox.io/s/cover-image-bf6282?from-embed=&file=/src/Card.tsx

然后我使用以下代码创建了一个.eslintrc 文件（这是唯一的代码）：

{
  "extends": "react-app"
}

我收到了这个 TypeScript 编译错误：

可能是什么问题，以及如何解决？

这是有问题的文件：

卡片.tsx：

interface CardProps {
  width?: number;
  height?: number;
}

export default function Card({ width = 660, height = 300 }: CardProps) {
  return (
    <div
      style={{
        display: "flex",
        height,
        width,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
        backgroundImage: "linear-gradient(to bottom, #dbf4ff, #fff1f1)",
        fontSize: width / 12,
        letterSpacing: -width / 220,
        fontWeight: 700,
        whiteSpace: "nowrap"
      }}
    >
      <div
        style={{
          display: "flex",
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(0, 124, 240), rgb(0, 223, 216))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        Build images
      </div>
      <div
        style={{
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(121, 40, 202), rgb(255, 0, 128))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        with React
      </div>
      <div
        style={{
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(255, 77, 77), rgb(249, 203, 40))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        from your Browser
      </div>
    </div>
  );
}

【问题讨论】：

标签： reactjs typescript tsx

【解决方案1】：

可能是什么问题，以及如何解决？

inline react 中的样式（webkits 也是）必须是驼背.代替
"-webkit-background-clip": "text",
和
WebkitBackgroundClip: "text",
https://codesandbox.io/s/cover-image-forked-te5srw?file=/src/Card.tsx

【讨论】：