How to correctly enumerate a class in a template?

Question

JavaScript

How to enumerate classes correctly if there are more than 1 of them? Let's say the button was wrapped in a div and had a p paragraph with unique classes ? Pass in an archive, or just enumerate classNameDiv, etc. ?

const Button = ({
  onClick,
  className = '',
  children,
}) =>
  <button
    onClick={onClick}
    className={className}
    type="button"
  >
    {children}
  </button>

Answer 1

This is perhaps the worst path you can take.
The implementation of the bean should be encapsulated, and you should work with its interface.

<Button
  type="outline"
  size="sm"
  color="succes"
  disabled={isButtonDisabled}
  onClick={handleClick}
>
  Succes
</Button>

Answer 2

in a good way, the internal classnames of the components should be hardwired inside the component, like this:

const WrappedButton = ({
  onClick,
  rootClassName = '',
  children,
}) =>
  <div className={rootClassName}>
    <p className="some inner classname">
      <button
        onClick={onClick}
        className="another one classname"
         type="button"
      >
        {children}
      </button>
    </p>
  </div>

but no one will forbid you to pass in props at least an object with classnames, at least an array, at least fifty props for each internal classname. if such a need arose, then most likely the component was written poorly