React ChakraUI striped table single cell background color

Question

As the title suggests I'm not entirely sure on the solution to this as it's quite tricky. I would like to set a certain color as it's important on the UI aspect of my program as Color Scheming other than rendering (or just running a loop) to decide what color each cell would be and just make an exception to the cell that I want the background to be red, be red. There must be a much more versatile way, but for the life of me I just can't seem to get it. any point in the right direction is vastly appreciated TYIA!

<Table variant="striped" colorScheme="gray">
            <TableCaption>Imperial to metric conversion factors</TableCaption>
            <Thead>
                <Tr>
                    <Th>Time Frame</Th>
                    <Th>Base</Th>
                    <Th>Bills</Th>
                    <Th>With Bills</Th>
                </Tr>
            </Thead>
            <Tbody>
                <Tr>
                    <Td>inches</Td>
                    <Td>millimetres (mm)</Td>
                    <Td isNumeric background="darkred">25.4</Td> //THIS DOES NOT WORK!!
                </Tr>
                <Tr>
                    <Td>feet</Td>
                    <Td>centimetres (cm)</Td>
                    <Td isNumeric>30.48</Td>
                </Tr>
                <Tr>
                    <Td>yards</Td>
                    <Td>metres (m)</Td>
                    <Td isNumeric>0.91444</Td>
                </Tr>
            </Tbody>
            <Tfoot>
                <Tr>
                    <Th>To convert</Th>
                    <Th>into</Th>
                    <Th isNumeric>multiply by</Th>
                </Tr>
            </Tfoot>
        </Table>

Answer 1

I figured I could use the map function and just use the index parameter as a filter to add the background

note the oddColor Variable created | NOTE: for some reason the code isn't formatting, typical SO. sorry if it's unreadable

{ availTimeIntervals.map( (val, index, array) => { var interval = val.split(" "); var timeInterval = Moment().add(interval[0], interval[1]).format("MMMM, Do, YYYY"); var oddColor = ( (index % 2) ? "gray.600" : null) if (index > 0){

                    var baseNew = Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD'
                    }).format(base * timeIntervalValues[index]);

                    var billsNew = Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD'
                    }).format(billsWeekly * timeIntervalValues[index])

                } else {
                    var baseNew = Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD'
                    }).format(base);

                    var billsNew = 
                        Intl.NumberFormat('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).format(billsWeekly);
                }``

``typescript

                var mathBilledBase = (base * timeIntervalValues[index]) - (billsWeekly * timeIntervalValues[index]);

                var billedBase =
                    Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD'
                    }).format(mathBilledBase);
                return (
                        <Tr>
                            <Th textAlign="center" bgColor={oddColor} textColor="skyblue" fontFamily="Inter" textShadow="2px 1px #000000">
                                { val } ( <i><u>{ timeInterval }</u></i> )
                            </Th>
                            <Th textAlign="center" textColor="#4788ff" bgColor={oddColor} fontFamily="Inter" textShadow="2px 1px #000000">
                                { baseNew }
                            </Th>
                            <Th textAlign="center" bgColor="#ed2849" textColor="white" opacity={.85} fontFamily="Inter" textShadow="2px 1px #000000">
                                { billsNew }
                            </Th>
                            <Th textAlign="center" maxW="20vw" bgColor={oddColor} textColor="white" fontFamily="Inter" textShadow="2px 1px #000000"> 
                            <Tooltip placement="left" label={ "( " + baseNew + " ➖ " + billsNew +  ") ="}>
                                    <u id="billyBase">{billedBase}</u>
                                </Tooltip>
                            </Th>
                            {
                                percentageOfTheCut.map((val, index, array)=> {
                                    var quickMafs = 
                                        Intl.NumberFormat('en-US', {
                                            style: 'currency',
                                            currency: 'USD'
                                        }).format(mathBilledBase * val);
                                    return (
                                            <Th bgColor={oddColor} textColor="limegreen" fontFamily="Inter" textAlign="center" textShadow="2px 1px #000000">
                                                <Tooltip placement="left" label={"( " + billedBase + " * " + ( val*100 ) + "% ) ="}>
                                                    {quickMafs}
                                                </Tooltip>
                                            </Th>
                                    )
                                })
                            }``