Add a "dummy" Mui-component processed in the custom them `overrides` prop to enable "targetting" without impacting layout

The pain-point

I use the overrides prop a lot. In order to target a component there must be a Mui parent as the starting point for my selectors to latch-onto.

Sometimes, I have a component that uses "straight-up" React components encoded using plain-old html tags. As of now, I can't include this component in my custom theme. Of course I can "hack-it" using something like Container but that is not good design as it introduces a false intent.

The solution

In many programming languages there is the concept of the "identity function".

identity :: a -> a

The function outputs what was inputted. However, there is a related function with an important "extra": in a typed language the output might be "cast" to something that remains true to the identity value, but augments where the value can now operate (lifts the value).

pure :: a -> c a

... the idea:

muiTag :: html -> mui html

I propose a Mui component with no effect on the layout; i.e., does not distort/interact with the meaning of the child elements.

<MuiOverride className='My-Custom-Class'>
   <html-element />
</MuiOverride>

... where the MuiOverride -> html

<span class="MuiOverride My-Custom-Class">
   <html-element />
</span>

Note: while the name might seem heavy-handed, I chose it because it suggests using it with the overrides prop. While naming is important, the idea is not meant to hinge on it. e.g., <MuiId>, <MuiTag>, <MuiSpan> are others that come to mind.

Summary

Create a Mui component that generates a html element that does not change the layout (e.g., <span>. With support for this component, users can unify the configuration of their design under a single Mui banner.

Finally

Thank you for all of your efforts. The quality of this resource is top-tier.

• I have searched the issues of this repository and believe that this is not a duplicate.

The issue proposes a new MuiOverride component that wraps plain HTML children without changing their layout and allows them to be targeted through the theme overrides prop. Start by locating the existing component and theme-override entry points, then define the component's rendered element and verify that its styling and layout behavior meet the proposal.