在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

可能是您在background中使用style但在backgroundColor中使用hover的事实吗？尝试仅使用backgroundColor或background

编辑

我想我知道了

Material UI docs

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

并且根据TableRow here上的文档，类tableRow不存在。这就是为什么如果您更改其中样式的原因，则什么都不会改变。

所以在这里：

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