将成帧器运动与 Preact 一起使用时，属性“className”不存在

Question

任何人都可以解释为什么我不能在framer-motion中使用className或onClick：

import { motion } from 'framer-motion';

export function App() {
    return <motion.div className="app">App</motion.div>;
}

于是出现错误：

Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.
  Property 'className' does not exist on type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.ts(2322)
(property) className: string

这是我的package.json：

{
    "name": "preact",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "framer-motion": "^10.16.15",
        "preact": "^10.19.1",
        "react-hot-toast": "^2.4.1",
        "react-icons": "^4.12.0",
        "vite-plugin-svgr": "^4.2.0"
    },
    "devDependencies": {
        "@preact/preset-vite": "^2.6.0",
        "@types/node": "^20.9.3",
        "sass": "^1.69.5",
        "typescript": "^5.2.2",
        "vite": "^5.0.0"
    }
}

我的tsconfig.json代码：

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,
        "paths": {
            "react": ["./node_modules/preact/compat/"],
            "react-dom": ["./node_modules/preact/compat/"],
            "@/*": ["./src/*"]
        },

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "jsxImportSource": "preact",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }],
    "types": ["vite-plugin-svgr/client"]
}

这是我的代码 错误

我重新安装了framer-motion并安装了版本9（基于YouTube上的教程）而不是版本10，它仍然无法工作。

Answer 1

当我从 next js v14 升级到 v15 时，我遇到了同样的问题，我不知道其原因，但您可以通过从 framer-motion 扩展 MotionProps 来修复它。

import { motion, MotionProps } from 'framer-motion';

// Define a new interface that extends MotionProps
interface CustomMotionProps extends MotionProps {
 className: string;
}

// Create a new component that uses the custom props
const CustomMotion = motion<CustomMotionProps>('div');