我可以用打字稿在点击材料界面时更改方框背景颜色吗

Question

每当单击Box时，我都想更改它的背景色。OOTB我找不到可以帮助我的用例的东西。因此，我尝试在Click上使用事件，但找不到合适的事件，该事件可以带来所选事件的信息，并允许我更改样式值。

用例-

我正在动态创建多个盒子，一次只能突出显示一个盒子

{allSports !== null &&
allSports?.map((sports) => (
<Grid
item
xs={4}
sx={{ mx: "auto", my: 1, minWidth: "80%" }}
onClick={backgroundChange}
>
<Item
//   onClick={() => sportChoose(sports)}
>
<Box sx={{ display: "flex", justifyContent: "space-evenly" }}>
<Box>
<img
src={
require(`../../../../../resources/images/sportsIcons/${sports.icon}`)
.default
}
/>
</Box>
<Box sx={{ m: "auto" }}>
<Typography variant="h6">{sports.name}</Typography>
</Box>
</Box>
</Item>
</Grid>
))}

Answer 1

import { FC, ReactElement, useState } from 'react'
import { Box } from '@mui/material'
export const MuiCard: FC = (): ReactElement => {
const [clicked, setClicked] = useState(false)
const toggleClicked = () => setClicked((prev) => !prev)
return (
<Box
component="div"
onClick={toggleClicked}
sx={{ height: 20, backgroundColor: clicked ? 'red' : 'white' }}
/>
)
}