N
Novu2y ago
turtles

React - Little bit confused about new INotificationCenterStyles we can pass in

Hey I saw its now discouraged to pass in a theme to the <PopoverNotificationCenter /> and we should pass in a style object to the <NovuProvider />. Previously if I wanted to change the brand colour in front of unread notifications I could pass in a theme to the PopoverNotificationCenter like this
const theme: INovuThemePopoverProvider = {
light: {
notificationItem: {
unread: {
notificationItemBeforeBrandColor: "#3498db",
}
}
}
}
const theme: INovuThemePopoverProvider = {
light: {
notificationItem: {
unread: {
notificationItemBeforeBrandColor: "#3498db",
}
}
}
}
How would I do this using the new using the INotificationCenterStyles interface? I had a quick play around but didn't get very far. Here's what I'm passing into the <NovuProvider>
const novuStyles: INotificationCenterStyles = {
header: {
title: {
fontSize: FontSize.NormalLarge,
fontWeight: 600,
},
markAsRead: {
fontSize: FontSize.Small,
},
},
notifications: {
listItem: {
unread: {
notificationItemBeforeBrandColor: "#3498db",
},
},
},
};
const novuStyles: INotificationCenterStyles = {
header: {
title: {
fontSize: FontSize.NormalLarge,
fontWeight: 600,
},
markAsRead: {
fontSize: FontSize.Small,
},
},
notifications: {
listItem: {
unread: {
notificationItemBeforeBrandColor: "#3498db",
},
},
},
};
I can see the header part working but I missing something for the notification part. Thanks in advance
3 Replies
Pawan Jain
Pawan Jain2y ago
I think notificationItemBeforeBrandColor is available in theme not in style
Paweł T.
Paweł T.2y ago
@turtles hey, the INotificationCenterStyles allows you to write just the CSS in JS, but it defines the object structure that you need to pass to apply the styles for a particular part of the notification center component. So if you would like to update the :before pseudo item you should be able to do it like this:
const novuStyles: INotificationCenterStyles = {
...
notifications: {
listItem: {
unread: {
':before': {
background: '#3498db'
}
},
},
},
};
const novuStyles: INotificationCenterStyles = {
...
notifications: {
listItem: {
unread: {
':before': {
background: '#3498db'
}
},
},
},
};
turtles
turtlesOP2y ago
Makes sense. Thanks guys
Want results from more Discord servers?
Add your server