0

I will try to explain my issue. I have created a button component with a prop named buttonClass which holds a default button class. Using it together with the "clsx" library.

default class: "btn text-white rounded-lg" and the buttonClass extends the class.

Not sure what is going wrong, works with other buttons if I don't add a the prop buttonClass to it. Why is it being overwritten?

But when I apply a different class like so it removes all my classes:

<Button
 buttonType="submit"
 text="Versturen"
 buttonClass="rounded-tl-none rounded-tr-none md:rounded-tr-lg md:rounded-bl-none px-7 
 rounded-lg"
/>

Button.tsx:

export type ButtonProps = {
  id?: string | number
  href?: string
  text: string
  onClick?: React.MouseEventHandler<HTMLElement>
  buttonClass?: string
  buttonType?: "submit" | "reset"
}



import Link from "next/link"

import { ButtonProps } from "types"

import { cn } from "@lib/utils"

const Button = ({
  href,
  text,
  buttonClass = "btn-secondary dark:btn-accent",
  buttonType
}: ButtonProps) => {
  if (href) {
    return (
      <Link
        href={href}
        className={cn(buttonClass, "btn text-white rounded-lg")}
      >
        {text}
      </Link>
    )
  }

  return (
    <button
      type={buttonType}
      className={cn(buttonClass, "btn text-white rounded-lg")}
    >
      {text}
    </button>
  )
}

export default Button
Galanthus
  • 1,958
  • 3
  • 14
  • 35
  • 1
    silly question but are you importing cn from the right place? maybe: `import cn from 'clsx';` might help? doesnt look like you've done anything wrong here – rymanso Mar 07 '23 at 16:37
  • @rymanso No silly question! I have created a function named "cn" which imports the clsx. I am trying to have a default btn color but I want to keep that default button if I add a different class other than the button color. But for some reason it just wipes the complete btn styles and replaces it. – Galanthus Mar 07 '23 at 19:39
  • Sorry that's I've still not clear what's your target. What classes you want to keep and what you want to be overridden? ***(1)*** default class: "btn text-white rounded-lg" ***(2)*** default `buttonClass = "btn-secondary dark:btn-accent"` ***(3)*** custom `buttonClass="rounded-tl-none rounded-tr-none ..."` I'm understanding as ***(1)*** always exist, when ***(3)*** exists, ***(3)*** overrides ***(2)***, otherwise take ***(2)***. Am I wrong? – haptn Mar 07 '23 at 20:18
  • @haptn Thank you for commenting appreciated. I am trying to always have a default class no matter what class is added to the the button. For instance the "btn" class has to stay. But I should be able to replace the secondary button with a primary themed color if that makes sense now? Now it gets rid of everything. Thanks in advance. – Galanthus Mar 07 '23 at 22:03
  • Thanks for explain about it. I'm sorry that as I see, your code seems to be right. I'm not sure are what caused this issue. If you have time, could you please create a minimal reproducible code for this (Codepen, CodeSandbox, Stackblitz,...), so we can easier to debug. – haptn Mar 10 '23 at 08:57

0 Answers0