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

Posted 2023-03-05

【中文标题】React ChakraUI 条纹表单单元格背景颜色

【英文标题】：React ChakraUI striped table single cell background color

【发布时间】：2022-01-14 21:06:43

【问题描述】：

正如标题所示，我不完全确定解决方案，因为它非常棘手。我想设置某种颜色，因为它在我的程序的 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>

【参考方案1】：

你可以直接设置css

<Td isNumeric css=
    background: 'darkred'
>

【参考方案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>
                                    )
                                )
                            ``