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

1 messages · Page 1 of 1 (latest)

forest wind
#

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",
            }
        }
    }
}

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

I can see the header part working but I missing something for the notification part. Thanks in advance

frosty ingot
#

I think notificationItemBeforeBrandColor is available in theme not in style

pine lantern
#

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