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. The styles object interface and all the props can be found 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' }),
  },
  ...
};

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' },
    },
  };
}

note

Facing issues in using notification center? Check out FAQs here