Next.js中react-chatbot-kit默认样式不生效问题求助

问题描述 #

在Next.js项目中引入react-chatbot-kit组件后，组件未显示预期的默认聊天框样式，仅展示无格式的内容结构。

解决方案 #

1. 导入组件默认CSS文件 #

react-chatbot-kit的默认样式需要手动导入，在你的组件文件中添加以下导入语句：

import 'react-chatbot-kit/build/main.css';

2. 适配Next.js路由模式 #

• 如果使用App Router（Next.js 13+）：
  组件需添加'use client'指令（服务器组件不支持直接导入CSS），修改后的组件代码如下：

  'use client';
  
  import Chatbot from 'react-chatbot-kit';
  import 'react-chatbot-kit/build/main.css';
  import config from './config';
  import ActionProvider from './actionProvider';
  import MessageParser from './messageParser';
  
  const ChatBotFlight = () => {
    return (
      <div>
        <Chatbot
          config={config}
          actionProvider={ActionProvider}
          messageParser={MessageParser}
        />
      </div>
    );
  };
  
  export default ChatBotFlight;
  

• 如果使用Pages Router：
  直接在组件中导入CSS即可，无需额外添加指令。

3. 检查config配置是否覆盖默认样式 #

打开你的config.js文件，确认是否设置了customStyles属性覆盖了默认样式。如果有，可暂时注释掉该配置，测试默认样式是否恢复：

// 暂时注释以下自定义样式代码
// customStyles: {
//   botMessageBox: {
//     backgroundColor: "#376B7E",
//   },
//   // ...其他自定义样式
// }

4. 更新依赖版本 #

确保安装的react-chatbot-kit为最新稳定版，避免版本差异导致的样式问题：

npm install react-chatbot-kit@latest
# 或使用yarn
yarn add react-chatbot-kit@latest

内容的提问来源于stack exchange，提问作者user11482333