The usefulness of this articled is lessened because it's React-specific and React is bad with DOM and style isolation in general.

The base problem here is that both a component and its host may want to style the component. The component model should account for this and offer some guidance.

Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with the `:host` selector can be overridden by the outside styles, without the component needing to weaken encapsulation by allowing styling from the outside via JS properties. This means it's not really bad for a component to give itself default outside styling like block vs inline display, or even margins, because the user can always reset them as needed, much like built-in elements.

For instance, a web component might have these styles:

    <my-element>
      #shadow-root
        :host {
          margin: 1em;
        }

And at its use-site, the margins can be set differently:

    <style>
      my-element {
        margin-botton: 0;
      }
    </style>
    <h1>...</h1>
    <my-element></my-element>
    <div>...</div>

Shadow DOM also helps with specificity fights, as the cascade goes: shadow style -> light style -> light !important -> shadow !important. This way a component can define which styles are only defaults.

Edit to clarify: one of the big problems with the article is the use of inline styles. They have the highest specificity and there's no built-in way to "merge" inline styles like you normally get via inheritance and the cascade.