React ChakraUI 条纹表单单元格背景颜色

Question

正如标题所示，我不完全确定解决方案，因为它非常棘手。我想设置某种颜色，因为它在我的程序的 UI 方面很重要，因为除了渲染（或只是运行一个循环）之外的颜色方案来决定每个单元格的颜色，并对我想要的单元格进行例外处理背景要红，要红。必须有一个更通用的方式，但对于我的生活，我似乎无法得到它。 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

你可以直接设置css

<Td isNumeric css={{
    background: 'darkred'
}}>

Answer 2

我想我可以使用 map 函数，只使用 index 参数作为过滤器来添加背景

注意创建的oddColor 变量| 注意：由于某种原因，代码没有格式化，典型的 SO。对不起，如果它不可读

{ 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);
                }``

``打字稿

                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>
                                    )
                                })
                            }``