[Theming] Allow component specific global theme overrides

There seems to be a need to override global styles per component due to design language differences and variations. Per component global overrides should be on a theme or the ThemeProvider level.

Current Behavior

Currently, in order to override styles on a specific component across the whole application, you’d need to create and use a customized component that passes needed overrides to the BaseUI component.

Potential Solutions

1. Let the styledfunction accept a third argument, that is a per component style override hook. A POC can be found here. Some cons here:
   • Component overrides would be css declaration blocks or functions that return a css declaration block in order to support dynamic styles. As opposed to the theme that contains style values only and no css declarations.
2. Have optional component specific style values in the theme obj. POC. Cons:
   • The styled components code get’s messy

[airhorns]

Did you fine folks make any decisions around this? It would be super great to get for those of us who want to make themes that do fancier stuff!!

[tolgaouz]

Looks good conceptually to me - I like having an HOC like that. Not sure what this part is about tho:

 // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to withOverrides as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });

Sorry, my bad! I was just thinking about the concept while preparing this code snippet so I just took some parts of it from the official docs, forgot to replace the names! 😅 Just fixed it.

Then maybe I can create a PR with a better explanation of everything after running tests and making sure this works