How to add multiple classnames?

[alexradulescu]

Hi,

Probably stupid question but imagine the following scenario:

• I have a generic button classname, that I share among multiple components
• I also have a special override to that one in a component
• I also get a css classname from the parent component?

Something like...

import { css } from '@acab/ecsstatic';
import { defaultButton } from './shared';

export const Button = ({className, ...props}) => {
  return <button {...props} className={???} />; // I want all 3, `defaultButton`, `specialButton` and whatever classname comes from parent component
};

const specialButton = css`
  ...
`;

[mayank99]

It's just string concatenation. You can do something like this:

className={`${defaultButton} ${specialButton} ${props.className}`}

or in a more fancy way:

className={[defaultButton, specialButton, props.className].filter(Boolean).join(" ")}

If you need nicer syntax or additional customization, you can use a small runtime utility like clsx or classnames.