React组件TailwindCSS样式不生效问题求助

我有两个React卡片组件，其中WorkOrderCard组件的div完全无法应用TailwindCSS样式，但TicketGUI组件的样式正常。以下是相关代码和已尝试的无效解决方案，需要排查问题原因。

错误组件代码（WorkOrderCard） #

Dashboard.tsx中WorkOrderCard的渲染代码 #

<div className="flex flex-col border border-red-700">
    {orders.map(
        ({ id, managerId, invoiceNumber, companyName, contact, partNumbers, partNames, quote, locationOnServer, reportType, createdAt }) => {
            return (
                <WorkOrderCard  id={id} managerId={managerId} invoiceNumber={invoiceNumber} companyName={companyName} contact={contact} partNumbers={partNumbers} partNames={partNames} quote={quote} locationOnServer={locationOnServer} reportType={reportType} createdAt={createdAt} timesheet={[]} />
            )
        }
    )}
</div>

WorkOrderCard.tsx组件定义 #

export default function WorkOrderCard(props) {
    const { id, managerId, invoiceNumber, companyName, contact, partNumbers, partNames, quote, locationOnServer, reportType, createdAt, timesheet} = props;
    const [manager, setManager] = React.useState<string>("");
    useEffect(() => {
        if (manager !== undefined) {
            const res = fetch("/api/users/get/" + managerId, {
                method: 'GET',
            }).then((res) => {
                if (res.ok) {
                    res.json().then((manager) => {
                        setManager(manager.name);
                    })

                } else {
                    console.log("There was an error fetching the ticket");
                    // setErrorMessage(res.statusText)
                }
            })
        }
    }, [])
    return (
        /* 尝试给div添加红色外边框，但完全不显示 */
        <div className="flex outline outline-red-600">
            <div className='flex flex-col'>
                <div className="flex flex-row">
                    <div className="flex">Invoice #{invoiceNumber}</div>
                    <div className="flex">{companyName}</div>
                </div>
                <div className="card-body">
                    <div className="card-text">
                        <strong>Contact:</strong> {contact || 'N/A'}
                    </div>
                    <div className="card-text">
                        <strong>Part Numbers:</strong>{' '}
                        {partNumbers.length > 0 ? partNumbers.join(', ') : 'N/A'}
                    </div>
                    <div className="card-text">
                        <strong>Part Names:</strong>{' '}
                        {partNames.length > 0 ? partNames.join(', ') : 'N/A'}
                    </div>
                    <div className="card-text">
                        <strong>Quote:</strong> ${quote}
                    </div>
                    <div className="card-text">
                        <strong>Location on Server:</strong> {locationOnServer}
                    </div>
                    <div className="card-text">
                        <strong>Report Type:</strong> {reportType}
                    </div>
                    <div className="card-text">
                        <strong>Created At:</strong> {createdAt.toString()}
                    </div>
                    <div className="card-text">
                    </div>
                    <div className="card-text">
                        <strong>Manager:</strong> {manager}
                    </div>
                    {timesheet.length > 0 && (
                        <div className="card-text">
                            <strong>Time Sheet:</strong>
                            <ul>
                                {timesheet.map((time) => (
                                    <li key={time.id}>
                                        {new Date(time.date).toLocaleString()} - {new Date(time.date).setHours(new Date(time.date).getHours() + time.hours).toLocaleString()}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

正常组件代码（TicketGUI） #

Dashboard.tsx中TicketGUI的调用代码 #

<div className="flex flex-col  justify-evenly border border-red-700">
    {tickets.map(
        ({ id, creator, broken_item, issue_desc, loc, prio, active, creatorName, createdAt }) => {
            return (
                <TicketGUI className="m-3" id={id} creator={creator} broken_item={broken_item} issue_desc={issue_desc} loc={loc} prio={prio} active={active} name={creatorName} createdAt={createdAt} />
            )
        }
    )}
    <div className="flex justify-between m-2">
        <button onClick={() => {
            ticketPageSelect(currentSession.user.id, tickets[0].id, setTickets, true, pageSize)
        }} className="justify-end px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Prev
        </button>
        <button onClick={() => {
            ticketPageSelect(currentSession.user.id, tickets[tickets.length - 1].id, setTickets, false, pageSize)
        }} className="justify-end px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Next
        </button>
    </div>
</div>

TicketGUI.tsx组件定义 #

export default function TicketGUI(props){
    const handlePress = async (e) => {
        Router.push('/tickets/'+props.id)     
    }
    return (
        <div className="flex flex-col rounded-lg shadow-lg p-2 m-3 outline outline-blue-300">
            <div className="flex  ">
                <img
                    className="object-cover h-12"
                    src={props.active ? "/inprocess.png" : "/fixed.png"}
                    alt="image"
                />
                <h1 className=" ml-2 text-xl font-semibold tracking-tight text-blue-600 whitespace-nowrap">
                        {props.broken_item}  - TicketID: {props.id}
                </h1>
            </div>
            <div className="p-4">
                
                <p className="mb-2 leading-normal">
                    {props.issue_desc}
                </p>
                <div className="flex w-full">
                    <button onClick={handlePress} className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
                        View Details
                    </button>
                    
                    <p className="p-2">
                        {format(new Date(props.createdAt),'MM/dd/yyyy')}
                    </p>
                </div>
                
            </div>
        </div>
    );
}

已尝试的无效解决方案 #

曾参考ChatGPT的建议调整className传递逻辑，但未解决问题，具体建议内容如下：

问题在于className属性被传递给组件，但没有用于组件内部元素的样式应用。在你提供的代码中，className属性仅用于指定组件自身的类，但没有应用到组件内部的元素上。

要修复这个问题，你可以使用className属性指定组件内部每个元素的类，或者使用className属性指定组件自身的类，然后使用class属性指定组件内部元素的类。

例如，你可以将这一行：

<div className={className}>

改为：

<div className={className}>
    <div className='flex flex-col'>
        <div className="flex flex-row">
            ...
        </div>
        <div className="card-body">
            ...
        </div>
    </div>
</div>

相关截图 #

• 样式未生效效果截图：
  
• 浏览器开发者工具截图：
  

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