Custom styling

The Notification Center Component allows you to customize the look of the component. You can do that by using the styles property, but depending on the wrapper UI library we support, the styles prop will be applied to different components, check the examples.

Styles interface

The styles property accepts an object with the following interface:

interface NotificationCenterStyles {
  bellButton?: ObjectWithRoot<{
    dot?: CSSFunctionOrObject;
  }>;
  unseenBadge?: CSSFunctionOrObject;
  popover?: {
    arrow?: CSSFunctionOrObject;
    dropdown?: CSSFunctionOrObject;
  };
  loader?: ObjectWithRoot;
  layout?: ObjectWithRoot;
  header?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
    markAsRead?: CSSFunctionOrObject;
    cog?: CSSFunctionOrObject;
    backButton?: CSSFunctionOrObject;
  }>;
  tabs?: {
    tabsList?: CSSFunctionOrObject;
    tab?: CSSFunctionOrObject;
    tabLabel?: CSSFunctionOrObject;
    tabIcon?: CSSFunctionOrObject;
  };
  accordion?: {
    item?: CSSFunctionOrObject;
    content?: CSSFunctionOrObject;
    control?: CSSFunctionOrObject;
    chevron?: CSSFunctionOrObject;
  };
  switch?: ObjectWithRoot<{
    input?: CSSFunctionOrObject;
    track?: CSSFunctionOrObject;
    thumb?: CSSFunctionOrObject;
  }>;
  footer?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
  }>;
  notifications?: ObjectWithRoot<{
    listItem?: {
      read?: CSSFunctionOrObject;
      unread?: CSSFunctionOrObject;
      layout?: CSSFunctionOrObject;
      contentLayout?: CSSFunctionOrObject;
      title?: CSSFunctionOrObject;
      timestamp?: CSSFunctionOrObject;
      buttons?: ObjectWithRoot<{
        primary?: CSSFunctionOrObject;
        secondary?: CSSFunctionOrObject;
      }>;
    };
  }>;
  preferences?: ObjectWithRoot<{
    item?: {
      title?: CSSFunctionOrObject;
      channels?: CSSFunctionOrObject;
      divider?: CSSFunctionOrObject;
      content?: {
        icon?: CSSFunctionOrObject;
        channelLabel?: CSSFunctionOrObject;
        success?: CSSFunctionOrObject;
      };
    };
  }>;
}

type CSSFunctionInterpolation = (args: {
  theme: INovuTheme;
  common: ICommonTheme;
  colorScheme: ColorScheme;
}) => CSSInterpolation;

type CSSFunctionOrObject = CSSFunctionInterpolation | CSSInterpolation;

type ObjectWithRoot<T = {}> = T & {
  root: CSSFunctionOrObject;
};

The CSSInterpolation is the object type from the @emotion/css package, you can find more details about it here.

The styles object can be defined like this:

const styles = {
  header: {
    root: {
      backgroundColor: 'white',
      '&:hover': { backgroundColor: 'pink' },
      '.some_class': { color: 'red' },
    },
    title: ({
      theme, // INovuTheme;
      common, // ICommonTheme;
      colorScheme, // ColorScheme;
    }) => ({ color: colorScheme === 'light' ? 'black' : 'white' }),
  },
  ...
};

To learn more about the INovuTheme and ICommonTheme interfaces, check the theming page.

Example usage

Web component

<!-- HTML -->
<notification-center-component ...></notification-center-component>
<script>
  // here you can attach any callbacks, interact with the Notification Center Web Component API
  let nc = document.getElementsByTagName('notification-center-component')[0];
  nc.styles = {
    header: {
      root: { backgroundColor: 'red' },
    },
  };
</script>

React component

<NovuProvider
  styles={{
    header: {
      root: { backgroundColor: 'red' },
    }
  }}
>...

Vue component

<script lang="ts">
  import { NotificationCenterComponent } from '@novu/notification-center-vue';

  export default {
    components: {
      NotificationCenterComponent,
    },
    data() {
      return {
        styles: {
          header: {
            root: { backgroundColor: 'red' },
          },
        },
      };
    },
  };
</script>

<template>
  <NotificationCenterComponent :styles="styles" ... />
</template>

Angular component

<notification-center-component [styles]="styles" ...></notification-center-component>

@Component({
  selector: '...',
  templateUrl: './component.html',
})
export class AppComponent {
  styles = {
    header: {
      root: { backgroundColor: 'red' },
    },
  };
}