Provide an API to exclude or overload AppThemeProvider

Context

On the HP DevEx project, we’re using the default Backstage frontend app for the admin interface. The frontend that users see is a different React app in the same monorepo. Each major section of the UI is a separate package that uses the Backstage plugin template. We use @backstage/cli plugin:serve to run each section separately while doing development. We use the dev.tsx file to configure the development environment for each section. Here is what the bootstrap mechanism looks like,

import React from 'react';
import ReactDOM from 'react-dom';
import { createApp } from '@backstage/core-app-api';
import { Section } from '../src';

const app = createApp();
const BackstageProvider = app.getProvider();

const HpDevExApp = ({ children }) => {
   const wrap  = () => {
     // our setup goes here which uses config from app-config.yaml
   }; 
   return wrap(children);
}

const DevApp: FC<{
  children: ReactNode;
}> = ({ children }: { children: ReactNode }) => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <BackstageProvider>
        <HpDevExApp>{children}</HpDevExApp>
      </BackstageProvider>
    </Suspense>
  );
};


ReactDOM.render(
  <DevApp>
    <Section />
  </DevApp>,
  document.getElementById('root'),
);

The benefit of this setup is that we’re able to use all of the Backstage APIs but use HP’s internal component framework. The problem is that <CssBaseline /> messes with CSS from HP’s component framework. I would really like to eliminate AppThemeProvider or replace it with another provider.

Currently, we created a patch to remove CSS provided by <CssBaseline /> but it messes with the CSS of our Backstage admin site because that site actually needs those styles.

Feature Suggestion

Make it possible to replace or remove AppThemeProvider from the context tree.

Possible Implementation

The possible API could be something like this,

const app = createApp();
const BackstageProvider = app.getProvider({ AppThemeProvider: ({ children }) =>  children });

We can contribute the change if Backstage team can suggest an API.

[taras]

@Rugvip perfect! We’ll work with this.

@minkimcello let’s work on this together when you get a chance.

[taras]

Closed in #7201