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