NEXTJS, стиль не работает во внутренних компонентах ⇐ CSS

[Anonymous]

Я пытаюсь создать клон чата, используя nextjs и попутный ветер. Я работаю над главным экраном чата, для каждого сообщения я использую компонент сообщения со своим собственным стилем, однако стиль вообще не применяется к компоненту сообщения. Я попробовал несколько решений, но ни одно из них не работает.
chatpage.js

Код: Выделить всё

import Head from 'next/head';
import { ChatSidebar } from '@/components /ChatSidebar';
import { useState } from 'react';
import { streamReader } from 'openai-edge-stream';
import { v4 as uuid } from 'uuid';
import { Message } from '@/components /Message';

export default function Home() {
const [incomingMessage, setIncomingMessage] = useState('');
const [messageText, setMessageText] = useState('');
const [newChatMessages, setNewChatMessages] = useState([]);

const handleSubmit = async e => {
e.preventDefault();
setNewChatMessages(prev => {
const newChatMessages = [
...prev,
{
_id: uuid(),
role: 'user',
content: messageText,
},
];
return newChatMessages;
});
console.log(messageText);
const response = await fetch('/api/chat/sendMessage', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({ message: messageText }),
});
const data = response.body;

if (!data) {
return;
}

const reader = data.getReader();
await streamReader(reader, async message => {
console.log('Message: ', message);
setIncomingMessage(s => `${s}${message.content}`);
});
};
return (


New Chat





{newChatMessages.map(message => (

))}
{!!incomingMessage && (

)}




 setMessageText(e.target.value)}
placeholder="Send a message..."
className="w-full resize-none rounded-md bg-gray-700 px-5 py-1 text-white"
>

Send







);
}

js-компонент сообщения

Код: Выделить всё

import { useUser } from '@auth0/nextjs-auth0/client';
import Image from 'next/image';
export const Message = ({ role, content }) => {
const { user } = useUser();
return (
className={`grid grid-cols-[30px_1fr] gap-5 p-5${
role === 'assistant' ? ' bg-gray-600' : ''
}`}
>

{role === 'user' && !!user && (

)}
{role === 'assistant' && avatar}

{content}

);
};

Я пытаюсь заставить стиль компонента сообщения работать.

Подробнее здесь: https://stackoverflow.com/questions/784 ... components