仅在两行上放置两个backgroundcolor

问题描述

如何将两种颜色的背景放在两条不同的线上？

在单击表格行之前，我设法将其设置为一行，并且当满足条件时，我想在另一行上放置第二种背景色

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import {TableBody,Table,TableCell,TableContainer,TableHead,TableRow,Paper} from "@material-ui/core";
import { useState } from "react";

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },tableRow: {
    "&$selected,&$selected:hover": {
      backgroundColor: "#E8E8E8"
    }
  },hover: {},selected: {}
});

function createData(name,calories,fat,carbs,protein) { return { name,protein }; }    
const rows = [ createData("Frozen yoghurt",159,6.0,24,4.0),createData("Ice cream sandwich",237,9.0,37,4.3),createData("Eclair",262,16.0,6.0),createData("Cupcake",305,3.7,67,createData("Gingerbread",356,49,3.9) ];

export default function SimpleTable() {
  const classes = useStyles();

  const [selectedIndex,setSelectedIndex] = useState(null);
  const val = false;
  const secondRow = 0;

  const selectRow = (i) => {
    setSelectedIndex(i);
    if (val) {
      // put a backgroundcolor on line 1
    }
  };

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row,index) => (
            <TableRow hover key={row.name} onClick={() => {selectRow(index);}} selected=selectedIndex === index} classes={{ hover: classes.hover,selected: classes.selected }}              className={classes.tableRow} >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

https://codesandbox.io/s/material-demo-forked-5u4jz?file=/demo.js

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）