Next.js Discord

Discord Forum

Button color prop not working

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I created a Button component with receives 3 props: text color and size (btw i didn't use size yet)

13 Replies

West African LionOP
import { ButtonData } from "@/constants/app.types";

const Button = (props: ButtonData) => {
  return (
    <button
      className={`px-[0.8rem] py-[0.4rem] ml-2 rounded-md bg-${props.color}`}
    >
      {props.text}
    </button>
  );
};

export default Button;
here is the button component's code
import { Directions } from "@/constants";
import Link from "next/link";
import Image from "next/image";
import Button from "./Button";
import { NavbarLinks } from "@/constants/app.types";

const Header = () => {
  return (
    <header className="w-full h-24 flex justify-center">
      <div className="w-[75%] h-full flex items-center justify-between">
        <div>
          <p className="font-extrabold text-xl">
            DIS<span className="text-primary">NEWS</span>
          </p>
        </div>

        <div className="flex items-center">
          <ul className="flex">
            {Directions.map((link: NavbarLinks) => (
              <li className="m-2" key={link.id}>
                <Link href={link.href}>{link.text}</Link>
              </li>
            ))}
          </ul>
          <Button color="primary" text="Get started" size="s" />
        </div>
      </div>
    </header>
  );
};

export default Header;
here is the navbar which i used button in
THE PROBLEM:
but when i replace bg-${props.color} with bg-primary, then everything works properly, even if i change it back to bg-${props.color} again
@ts-ignore
tailwindcss needs full classnames beforehand
so bg-${props.color} isn't gonna work
West African LionOP
thanks