Novu•4mo ago

Customizing Scrollbar with CSS in NovuProvider Component

Hi! We're using Novu notification services to manage notifications in our web app. We'd like to customize the scrollbar using CSS to match the style of our web app. Can someone help me figure out how to do this using the styles prop of the NovuProvider component? Thanks in advance!

5 Replies

Ask Inkeep•4mo ago

Hi @Bismay Purkayastha, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * API Reference * Customizing Notification Center * Configuring Multiple Tabs * I implemented the Dev Community Notification Center with React, Novu, and Websockets - Novu ----------------------------- Answer Thank you for your question about customizing the scrollbar in the Novu notification center. I'll do my best to provide information based on the available documentation. The NovuProvider component does offer a styles prop that allows for customization of various elements (1) . However, after carefully reviewing the documentation, I couldn't find any specific mention of customizing the scrollbar directly through the styles prop (1) (2) . That being said, there are a few approaches we can consider: 1. General styling: The styles prop allows you to customize many aspects of the notification center's appearance (2) . While there's no direct mention of scrollbar customization, you may be able to affect the overall look and feel, which could indirectly impact the scrollbar appearance. 2. Custom CSS: You might be able to target the scrollbar using custom CSS outside of the NovuProvider component. This would involve identifying the correct CSS selectors for the scrollbar elements and applying your styles. 3. Feature request: It appears that customizing the scrollbar specifically isn't currently a documented feature of the NovuProvider component. There is an open GitHub issue discussing updates to the UX/UI of the scroll component (3) , which suggests this is an area of ongoing development. Given the current documentation, I can't provide a direct code snippet for customizing the scrollbar through the styles prop. However, if you'd like to explore general styling options, here's an example of how yo u might use the styles prop:

Ask Inkeep•4mo ago

<NovuProvider
  subscriberId={process.env.REACT_APP_SUB_ID}
  applicationIdentifier={process.env.REACT_APP_APP_ID}
  styles={{
    notifications: { 
      listItem: { 
        layout: { color: '#E3554D' } 
      } 
    }
  }}
>
  {/* Your notification center components */}
</NovuProvider>

<NovuProvider
  subscriberId={process.env.REACT_APP_SUB_ID}
  applicationIdentifier={process.env.REACT_APP_APP_ID}
  styles={{
    notifications: { 
      listItem: { 
        layout: { color: '#E3554D' } 
      } 
    }
  }}
>
  {/* Your notification center components */}
</NovuProvider>

(2) This example demonstrates customizing the color of list items in the notifications, but it doesn't directly address the scrollbar. If customizing the scrollbar is crucial for your application, you might want to: 1. Experiment with custom CSS targeting the scrollbar elements directly in your application. 2. Consider contributing to or following the open issue about scroll UI updates (3) . 3. Reach out to the Novu community or support channels for more specific guidance or to request this feature if it's not currently available. I apologize that I couldn't provide a more direct solution for customizing the scrollbar. The current documentation doesn't explicitly cover this specific customization option.

Sources [1] API Reference [2] Customizing Notification Center [3] [NV-2837] Update UX/UI of the scroll

Ask Inkeep•4mo ago

Feel free to tag @Ask Inkeep with additional questions.

Pawan Jain•4mo ago

@Bismay Purkayastha it can be customized using styles prop https://docs.novu.co/inbox/react/customization#customization-using-styles-prop checkout this codesandbox link for exact lines of code you can change https://codesandbox.io/p/sandbox/custom-styles-novu-nc-2jd46m?file=%2Fsrc%2Fstyles.js%3A120%2C1-122%2C1&fontsize=14&module=%2Fsrc%2Fstyles.js&moduleview=1&theme=dark

Bismay Purkayastha•4mo ago

Yes, this is exactly what I was looking for. Currently, I'm working on some other features. I'll try this out and let you know if any problems arise.

Gaming

Programming

Customizing Scrollbar with CSS in NovuProvider Component