Override default getstream component styles into NextJS Component

Question

How can I override the getStream.io components css with custom css ? I have create the component as below and I need to override the css for the various classes of it's components.

As per this README documentation I have import the css file into my Next.JS component and then write my custom css of their component into the /public/style.css file but it is not applying any how.

import React from 'react';
import { StreamChat } from 'stream-chat';
import { Chat, Channel, ChannelHeader, MessageInput, MessageInputSmall, VirtualizedMessageList, Window } from 'stream-chat-react';
import 'stream-chat-react/dist/css/index.css';

const chatClient = StreamChat.getInstance(process.env.GET_STREAM_KEY);
const userToken = process.env.GET_STREAM_TOKEN;

chatClient.disconnectUser()
chatClient.connectUser({id: userId}, userToken);

const channel = chatClient.channel(process.env.TYPE, process.env.ROOM);

const ChatComponent = () => (
  <Chat client={chatClient} theme='livestream dark'>
    <Channel channel={channel}>
      <Window>
        <ChannelHeader live />
        <VirtualizedMessageList />
      </Window>
    </Channel>
  </Chat>
);

export default ChatComponent;

I have written the below css into style.css file to override the css of the components but below css are not applying.

.str-chat-channel {
  max-height: 150px;
}

.str-chat__virtual-message__wrapper {
  padding: 10px 40px 10px 15px;
}

.str-chat__virtual-message__wrapper {
  align-items: center;
}

.str-chat__virtual-message__wrapper .str-chat__avatar--rounded {
  border-radius: 25px;
}

Answer 1

You should move your stream-chat-react global CSS import to your custom _app file then import your own styles.css after it.

// pages/_app.js

import "stream-chat-react/dist/css/index.css";
import "<your-path-to>/style.css"; // Replace with the path to your `style.css`

// ...