Component does not reflect CSS style changes


I got a problem with a React component that takes as a prop scrollY:

const Button = ({
}) => {

    const [localScrollY, setLocalScrollY] = useState(0);

    useEffect(() => {
    }, [scrollY]);


    return (
            className={`top-3 mt-[${scrollY}px] ....`}

I can see the mt class change in the console when scrolling , yet it does not reflect in the UI.Additionally , the console.log shows the expected class. Could you please let me know what I might be doing wrong ?

Thank you !

>Solution :

You cannot use dynamic class names like mt-[${scrollY}px] in tailwind, as all the class are statically generated at compile time. If you need a CSS property to depend on a truly dynamic value like a scroll amount, you should use inline styles for it:

  className={`top-3 ....`}
  style={{marginTop: scrollY + "px"}}

Leave a Reply Cancel reply