运动无法识别 global.css 变量

Question

我正在尝试在 NextJS 15 项目中使用 Motion（以前称为 Framer Motion）为 React (19) 制作一些动画。

问题是，我无法将

global.css

文件中不同变量中定义的颜色应用于

motion.div

组件。

这是我正在使用的代码片段

import React from 'react';

import { motion } from 'motion/react';

type Props = {
    target: string;
    title: string;
};

const NavLink = (props: Props) => {
    return (
        <motion.div
            layout
            className="mt-1 cursor-pointer uppercase text-xs mx-2 relative"
            initial={{ color: `var(--muted)` }} // <---- Not Applying
            whileHover={{ color: ['var(--muted)', 'var(--primary)'] }} // <---- Not Working
            transition={{ duration: 0.2 }}
            onClick={() => console.log(props.target)}
        >
            {props.title}
        </motion.div>
    );
};

export default NavLink;

Tailwindcss 类也没有改变，所以如果我尝试做

className: 'text-muted'

则无法在运动中工作，否则它可以。

不确定问题是什么，我对 NextJS 比较陌生，也是第一次使用 Framer 动作，所以我可能没有做一些明显的事情。

Answer 1

你的global.css是用shadcn/ui创建的吗？ 如果是这样，请注意 global.css 文件看起来像这样：

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
   }
}

并且规则看起来像

hsl(var(--primary))

（因为CSS变量是HSL值），所以像

initial={{ color: 'hsl(var(--muted))' }}

这样的东西应该显示正确的颜色。

但是，运动过渡似乎不适用于这种包装（它们可以改变颜色，但不能改变动画），并且 css 变量应该直接是颜色（类似于

#ffffff

或

hsla(244 100% 50%)

）才能正常工作.

下面是一个工作示例：

/* global.css */
@layer base {
  :root {
    --primary: hsl(244 100% 50%);
    --muted: hsl(321 100% 50%);
  }
}
/* ... */

"use client"; //motion probably need use client to work
import React from "react";

import { motion } from "motion/react";

type Props = {
  target: string;
  title: string;
};

const NavLink = (props: Props) => {
  return (
    <motion.div
      layout
      className="mt-1 cursor-pointer uppercase text-xs mx-2 relative"
      initial={{ color: `var(--muted))` }}
      whileHover={{
        color: "var(--primary)",
        transition: { duration: 0.5 },
      }}
      onClick={() => console.log(props.target)}
    >
      {props.title}
    </motion.div>
  );
};

export { NavLink };

顺便说一句，如果您无论如何都使用顺风，那么仅使用顺风的过渡可能是个好主意。