Объедините условные стили и наведите курсор на 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

РЕДАКТИРОВАТЬ

Я думаю, я понял это

Материал UI документы

Как я понимаю из документов, синтаксис, который вы используете для стиля, используется для переопределения существующих классов в компонентах.

И согласно документам на TableRow здесь , класс tableRow не существует. Вот почему, если вы измените стили в нем ничего не изменится.

Так вот:

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