React组件CSS样式变更未在UI生效，求助问题排查

核心问题 #

你遇到的是Tailwind CSS静态扫描机制导致的问题：Tailwind只会在构建阶段扫描代码中明确写出的类名，像mt-[${scrollY}px]这种运行时动态拼接的类名不会被识别，因此这些样式不会被打包到最终CSS文件里，UI自然不会更新。

解决方案 #

方案1：用内联样式替代动态Tailwind类

直接通过style属性设置margin-top，绕过Tailwind的静态扫描限制：

const Button = ({ scrollY }) => {
    return (
        <motion.button
            className="top-3 ...."
            style={{ marginTop: `${scrollY}px` }}
        >
            ......
        </motion.button>
    )
}

方案2：配合CSS变量使用Tailwind

如果需要保留Tailwind语法（比如适配motion组件的动画特性），可以借助CSS变量实现：

1. 在全局CSS文件中定义变量：

:root {
    --scroll-margin-top: 0px;
}

2. 在组件中更新CSS变量：

const Button = ({ scrollY }) => {
    useEffect(() => {
        document.documentElement.style.setProperty('--scroll-margin-top', `${scrollY}px`);
    }, [scrollY]);

    return (
        <motion.button
            className="top-3 mt-[var(--scroll-margin-top)] ...."
        >
            ......
        </motion.button>
    )
}

额外优化 #

你代码里的localScrollY状态是多余的——scrollY作为props本身就是响应式的，直接使用即可，不需要通过useState和useEffect同步，这样能减少不必要的组件重渲染。

内容的提问来源于stack exchange，提问作者Peter Malik