Encountering a problem with button hover functionality in a Next.js component using Tailwind CSS. The objective is to alter the button's background color dynamically on hover based on a color value stored in the component's state.
This code functions flawlessly in a React.js application, but fails to trigger the hover effect in Next.js.
"use client";
import React, { useState } from "react";
const BottomButtons = ({ onHeaderTextChange }) => {
const [selectedButton, setSelectedButton] = useState("Delivery Rate");
const handleButtonClick = (buttonText) => {
setSelectedButton(buttonText);
onHeaderTextChange(buttonText);
};
const buttons = [
{ text: "Delivery Rate", color: "#00E096" },
{ text: "Click Rate", color: "#0E9AFF" },
{ text: "Open Rate", color: "#BF83FF" },
{ text: "Bounce Rate", color: "#FF947A" },
{ text: "Issues", color: "#FA5A7D" },
];
return (
<div className="flex items-center justify-end mb-4">
{buttons.map((button, index) => (
<button
key={index}
className={`p-2 hover:bg-[${button.color}] border`}
onClick={() => handleButtonClick(button.text)}
>
{button.text}
</button>
))}
</div>
);
};
export default BottomButtons;
Approaches Taken:
- Ensured correctness of the button.color values matching Tailwind color names.
- Examined for any conflicting styles through browser developer tools.
- Confirmed proper configuration of Tailwind and purging of unused CSS.
- Expected Outcome:
- Anticipating the button's background color to adjust dynamically depending on the corresponding Tailwind color name within the hover:bg-[button.color] class upon hovering over the button element.
Further Details:
- Verified that the code produces desired results in a pure React.js setting.
- Suspecting that the issue may be tied to Next.js' server-side rendering (SSR) mechanism.