在 ReactJS 中组合条件样式和悬停

Question

我有一个问题，我想实现一个条件样式和一个悬停函数（对于 TableRows）。单独使用两者都可以正常工作，但一起悬停功能不起作用。

CSS

const StyledTableRow = withStyles((theme) => ({
root: {
    tableRow: {
        "&$hover:hover": {
            backgroundColor: "blue"
        }
    },
},
}))(TableRow);

JSX

<TableBody>
                {RankingData.map((row) => (
<StyledTableRow hover
                                    className={classes.tableRow}
                                    key={row.name}
                                    style ={(
                                        row.remaining === "2" ||
                                        row.remaining === "1" )
                                        ? { background : " #ffff66" }:{ background : " 
#ff9999" }}>
                        <StyledTableCell align="right" size= 'small'>{row.starters} 
</StyledTableCell>
                        <StyledTableCell align="right" size= 'small'>{row.remaining} 
</StyledTableCell>
                    </StyledTableRow>
                ))}
            </TableBody>

有谁知道我必须做什么才能使条件格式和悬停一起工作？

提前谢谢你！

Answer 1

难道你在style 中使用background 而在hover 中使用backgroundColor？尽量只使用backgroundColor 或background

编辑

我想我明白了

Material UI docs

正如我从文档中了解到的，您用来设置样式的语法用于覆盖组件上的现有类。

根据 TableRow here 上的文档，tableRow 类不存在。这就是为什么如果你改变它的样式，什么都不会改变。

所以这里：

https://codesandbox.io/s/material-demo-pl6sb