在 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

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

并且根据 TableRow here 上的文档，class tableRow 不存在。这就是为什么如果您更改其中的样式，则不会发生任何变化。

所以在这里：

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

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

Combine conditional styles and hover in ReactJS

css

jsx

webstorm

reactjs