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

如何使用自定义css覆盖组件css？我已经创建了如下组件，我需要覆盖它的组件的各个类的css

根据这一点，我已经将css文件导入到我的

Next.JS

组件中，然后将其组件的自定义css写入

/public/style.css

文件中，但它没有应用任何方式

从“React”导入React；
从“流聊天”导入{StreamChat}；
从“stream Chat react”导入{Chat、Channel、ChannelHeader、MessageInput、MessageInputSmall、VirtualizedMessageList、Window}；
导入'stream chat react/dist/css/index.css'；
const chatClient=StreamChat.getInstance（process.env.GET\u STREAM\u KEY）；
const userToken=process.env.GET_STREAM_TOKEN；
chatClient.disconnectUser（）
connectUser（{id:userId}，userToken）；
const channel=chatClient.channel（process.env.TYPE，process.env.ROOM）；
const ChatComponent=（）=>(
);
导出默认组件；

我已将下面的css写入style.css文件，以覆盖组件的css，但下面的css不适用

.str聊天频道{
最大高度：150像素；
}
.str-chat\u虚拟消息\u包装器{
填充：10px40px15px；
}
.str-chat\u虚拟消息\u包装器{
对齐项目：居中；
}
.str-chat\uuu虚拟消息包装器.str-chat\uuu虚拟化身--四舍五入{
边界半径：25px；
}

您应该将您的

流聊天反应

全局CSS导入移动到您的应用程序中，然后再导入您自己的

style.CSS

//pages/\u app.js
导入“stream chat react/dist/css/index.css”；
导入“/style.css”；//替换为“style.css”的路径`
// ...