OnMouseEnter 输入更改背景颜色反应

Question

正在尝试更改鼠标输入时网格部分的背景颜色。这就是我所在的位置，但现在卡住了。我想我可以调用一个函数来更改鼠标输入时的 bg 颜色。

const [isShown, setIsShown] = React.useState(false)
function changeBackground(e) {
e.target.style.background = 'red';




 <Grid
            onMouseEnter={() => setIsShown(true)}
            onMouseLeave={() => setIsShown(false)} 
            container {...isShown && {changeBackground}} >
GRID ITEM

    </Grid>

Answer 1

您可以在 Grid 上使用 style 道具，它应该可以正常工作。

const [isShown, setIsShown] = React.useState(false)
function changeBackground(e) {
e.target.style.background = 'red';

 <Grid
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)} 
      style={{ width: "120px", height: "120px", 
      backgroundColor:isShown? "red" : ""  }} 
</Grid>