Comment by 01brett

Author here, I am using React. What I've done for "it shares some styles but not others" is create a

  const sharedStyles = "..."

and in my component combine the shared with the unique attributes

  <CoolComponent className={`${sharedStyles} py-3`} />

or using a string combiner utility like classNames/clsx

  <CoolComponent className={clsx(sharedStyles, "py-3")} />

If you have a props to change on, you can do this

  <CoolComponent className={clsx(sharedStyles, someProp ? "py-3" : "py-4")} />