將默認的getstream組件styles覆蓋到NextJS組件中

Question

如何使用自定義 css 覆蓋getStream.io組件 css？ 我已經創建了如下組件，我需要為其組件的各種類覆蓋 css。

根據此README 文檔，我已將 css 文件導入到我的Next.JS組件中，然后將我的自定義 css 組件寫入/public/style.css文件，但它沒有應用任何方式。

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;

我已將下面的 css 寫入 style.css 文件以覆蓋組件的 css，但在 ZC7A628CBA22E28EB26AE2A 下方不適用。

.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

您應該將您的stream-chat-react全局 CSS 導入移動到您的自定義_app文件，然后在其后導入您自己的styles.css 。

// 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`

// ...