将默认的 getstream 组件样式覆盖到 NextJS 组件中

Question

如何使用自定义 css 覆盖 getStream.io 组件 css？我已经创建了如下组件，我需要为它的组件的各种类覆盖 css。

根据这个 README documentation 我已经将 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 但以下 css 不适用。

.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 导入移动到 custom _app file，然后在其后导入您自己的 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`

// ...

将默认的 getstream 组件样式覆盖到 NextJS 组件中

Override default getstream component styles into NextJS Component

css

reactjs

getstream-io

next.js