Although uncommon (and admittedly weird), React does support passing in a boxed String for the className prop (and for other dom properties, too). It works because react is simply passing the className along to the DOM, which supports passing in a boxed String as the className.

React example: https://codepen.io/joeldenning/pen/oVxmQL
DOM example: https://codepen.io/joeldenning/pen/qvZgLb

The thing that caused me to make this change is that the kremling css library passes boxed String objects to className to allow for a cool chained API for constructing classNames. See https://kremling.js.org/api/always-maybe-and-toggle.html for examples. Afaik, you cannot add methods to a primitive string, and adding to the entire String prototype is undesireable. So the kremling implementation is to return a boxed String object that has some extra methods on it (always, maybe, and toggle)

Perhaps the alternative is to have the types of kremling return a value that is & stringed instead of being a subtype of String.

I tried that but I still get a compilation error. Typescript is too smart to be fooled into letting something that has to be a string be tricked by a maybe string maybe KremlingString

typescript-test ❯ ./node_modules/.bin/tsc
index.tsx:4:6 - error TS2322: Type 'string | KremlingString' is not assignable to type 'string'.
  Type 'KremlingString' is not assignable to type 'string'.

4 <div className={always('foo')} />
       ~~~~~~~~~

  node_modules/@types/react/index.d.ts:1426:9
    1426         className?: string;
                 ~~~~~~~~~
    The expected type comes from property 'className' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'


Found 1 error.

Wrong operator -- & (intersection, both at the same time), not | (either one of them).

Oops -- somehow missed that. That worked! Thanks for help. I'm new to typescript and didn't know what | or & were, or what the difference is. Thanks for teaching me.