我需要在同一个表格中显示3种不同字段的数据类型。为此，我希望有3个标题，每个标题都有不同的颜色。
我使用 Bootstrap 来做我的设计，我的代码是在Javascript与React。
我写了下面的代码来完成这个任务（我试图简化它，但是它通常是可重复的）

import * as React from "react";
import { useEffect, useState } from "react";
import { nanoid } from "nanoid";

//props object
type IPropsTable={
    currentDatas: (DataType1 | DataType2 | DataType3 | undefined;
}

const TableRequest: React.FC<IPropsTable> = ({ currentDatas }) => {

    const [existData1, setExistData1] = useState(false);
    const [existData2, setExistData2] = useState(false);
    const [existData3, setExistData3] = useState(false);

    useEffect(()=>{
        if (currentDatas) {
            currentDatas.map((currentData) => {
                if (currentData.type === "data1") {
                    setExistData1(true);
                } else if (currentData.type === "data2") {
                    setExistData2(true);
                } else if (currentData.type === "data3") {
                    setExistData3(true);
                }
            })
        }
    },[currentDatas])   

    function renderTableHeaderData1() {
        let header = ['someField1', 'someField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableHeaderData2() {
        let header = ['someOtherField1', 'someOtherField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableHeaderData3() {
        let header = ['someOtherOtherField1', 'someOtherOtherField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableData() {
        if(currentDatas){
            return currentDatas.map((session) => {
                if (session.type === "data1") {
                    return (
                        <tr key={nanoid()} className="warning">
                            <td>{session.someField1}</td>
                            <td>{session.someField2}</td>
                        </tr>
                    )
                } else if (session.type === "data2") {
                    return (
                        <tr key={nanoid()} className="info">
                            <td>{session.someOtherField1}</td>
                            <td>{session.someOtherField2}</td>
                        </tr>
                    )
                } else if (session.type === "data3") {
                    return (
                        <tr key={nanoid()} className="success">
                            <td>{session.someOtherOtherField1}</td>
                            <td>{session.someOtherOtherField2}</td>
                        </tr>
                    )
                }
            })
        } else{return undefined}
    }  

    return (
        <>
            <div>
                <table className="table table-sm">
                    <caption>Result Search</caption>
                    <thead>
                        {existData1? 
                            <tr className="thead-warning">{renderTableHeaderData1()}</tr>
                            : <></>
                        }
                        {existData2? 
                            <tr className="thead-info">{renderTableHeaderData2()}</tr>
                            : <></>
                        }
                        {existData3? 
                            <tr className="thead-success">{renderTableHeaderData3()}</tr>
                            : <></>
                        }
                    </thead>
                    <tbody>
                        {renderTableData()}
                    </tbody>
                </table>
            </div>
        </>
    )
}

export default TableRequest;

正如您在上面的代码中所看到的，我为每个<tr>（warning用于data1，info用于data2，success用于data3）分配了一个css类。但是当呈现组件时，没有颜色出现，表完全是白色的，无论是三个标题中的每一个，还是表中每一行包含的数据。

我试着用thead-warning，thead-info和thead-success类作为我的表头tr css类，它们似乎更合适。但是同样的结果，没有颜色显示。
有没有人看到我做错了什么，可以引导我在正确的方向，我真的不明白我的问题在哪里。