Having an issue with my button component where the props for styling are not working as expected. It seems like a problem occurs when attempting to use these props, even though there might not be any issues with the code itself. Interestingly, manually setting the colors in the button file, compiling it, and then passing them as a prop works only for that specific color.
Check out the code snippet below:
import React from "react";
function Button({ text, img, textColor, bg, hoverBg }) {
console.log(hoverBg);
return (
<button
className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
>
<img src={img} alt="button-img" className="h-6" />
<h1 className={`font-bold text-${textColor}`}>{text}</h1>
</button>
);
}
export default Button;
If you want to see how this is used on a page, take a look at the following:
import React from "react";
function Button({ text, img, textColor, bg, hoverBg }) {
console.log(hoverBg);
return (
<button
className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
>
<img src={img} alt="button-img" className="h-6" />
<h1 className={`font-bold text-${textColor}`}>{text}</h1>
</button>
);
}
export default Button;