Overridable styles for AnnouncementsPage Component

[sravanireddy115]

The plugin does offer the ability to pass themeId, which allows us to customize the header of the AnnouncementsPage but unfortunately not the cards.

We would like to have some style customizations done in Card. So we made some of the UI components overridable in AnnouncementsPage by defining CSS properties (itemCardHeader, link), providing a name to the makeStyles function, making the styles overridable in the OverridableComponents.tsx file, and exporting the overrides from the plugin. The same pattern is used by the backstage catalog-react plugin to allow users to override component styles.

We can use it like this in the backstage app.

import { BackstageOverrides as AnnouncementsOverrides } from '@k-pheon/backstage-plugin-announcements';
import { BackstageOverrides } from '@backstage/core-components';

const createCustomThemeOverrides = (): BackstageOverrides & AnnouncementsOverrides => {
  return {
    AnnouncementsStylePicker: {
      itemCardHeader: {
        // custom styles
      },
      cardHeader: {
        // custom styles
      },
      link: {
        // custom styles
      },
    },
  };
};