Skip to main content

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