Add new css class with out replace the olders on a React Component

Question

I have 2 components:

ButtonComponent:

export function Button(props: ButtonProps) {
  return <button className={styles.assignButton} {...props} />;
}

and I want to use then like that:

In another component:

<Button type="submit" className={styles.btnSubmit}>
  Cadastre-se
</Button>

But wen I do this I'm lost the css class styles.assignButton defined on the first declaration of the component.

Has some way to do this with out lost that css class and keep the both? Some way like a spread operator, I don't now.

Grateful :)

Answer 1

You can do it like this:

// Button.tsx

export function Button({ className, ...rest }: ButtonProps) {
  return <button className={`${styles.assignButton} ${className || ''}`} {...rest} />;
}

Do note that if you don't pass in a class name you'll have a trailing space after the assignButton style. Handling class names in various components can become quite unreadable so it's probably best to use classnames or something similar.

// Button.tsx

export function Button({ className, ...rest }: ButtonProps) {
  return <button className={classNames(styles.assignButton, className)} {...rest} />;
}