Как изменить цвет значка при наведении?

Question

Я пытаюсь изменить цвет значка материала внутри IconButton компонента материала (действие, которое должно вызывать изменение цвета - наведите указатель мыши на IconButton).

Как это можно сделать? Добавление класса к значку напрямую работает только при наведении курсора на сам значок, а не на IconButton.

Мой код:

<IconButton className="add-icon-btn" onClick={toggleNominationForm}>
  {!showForm ? <AddBoxIcon /> : <IndeterminateCheckBoxIcon /> }
</IconButton>

Answer 1

Вот вам полный пример, надеюсь, это решит вашу проблему:

import React from 'react'
import { makeStyles } from '@material-ui/styles'
import IconButton from '@material-ui/core/IconButton'
import AddBoxIcon from '@material-ui/icons/AddBox'
import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox'

export default () => {

    const [showForm, setShowForm] = React.useState(false)
    const classes = useClasses()

    return (
        <IconButton
            classes={{
                root: classes.iconContainer
            }}
        >
            {!showForm
                ? <AddBoxIcon className={classes.icon}/>
                : <IndeterminateCheckBoxIcon className={classes.icon}/>
            }
        </IconButton>
    )
}

const useClasses = makeStyles(theme => ({
    iconContainer: {
        "&:hover $icon": {
            color: 'red',
        }
    },
    icon: {
        color: 'blue',
    },
}))

Answer 2

Попробуйте добавить следующее CSS -

.IconButton:hover .Iconclass {
  background-color: /*desired color*/;
}

Answer 3

Возможно, вам понадобится состояние hover. Итак, вы можете использовать onMouseEnter и onMouseLeave для внешнего значка, а затем установить стиль, используя это условие для внутреннего значка. Этот лог c заимствован из этого ответа . Итак, я задаю свой ответ CW.

<IconButton
  onMouseEnter={() => {
    setHover(true);
  }}
  onMouseLeave={() => {
    setHover(false);
  }}
  className="add-icon-btn"
  onClick={toggleNominationForm}
>
  {!showForm ? (
    <AddBoxIcon style={{ backgroundColor: hover ? "blue" : "yellow" }} />
  ) : (
    <IndeterminateCheckBoxIcon />
  )}
</IconButton>