How can I override the css of internal Sendbird classes?

Hey. I have been trying to implement Sendbird chat functionality in our React application. Most of the things works nicely but I have got stuck in one issue. I am trying to use my own MessageInputBox component instead of the default one. It works okay.

The issue is that in the DOM, the parent div of the MessageInputBox component has a class sendbird-converstation__footer which has some padding css applied. I don’t want that padding to be there. And I want to add some background-color to that parent div. Is there a way I can override this internal css?

I am attaching an image below for reference.

As you can see in the image, my custom MessageInputBox currently is just a plain div
<div>This will be the custom input box in some time</div>
And it’s parent is the Sendbird internal div with the class sendbird-conversation__footer with the unwanted padding applied. I want to override it someway.

I hope i was able to explain it well. Please let me know if it’s possible. Thanks!

Hey @Abhishek_Rastogi,
It is very easy to do you can import own style sheet and override the css classes same like normal.
Create own style sheet file and import where you want to use and override the css classes.I also implement React.js UIKit and override the css classes as per requirements. I attached the screen shot of my style steel which very helpful for you. I created chat.css style sheet file.
Make sure classes name same.

Import here

3 Likes

Hi. Thanks for this! I will give it a shot.