我可以在使用打字稿的材料 ui 中单击时更改框背景颜色吗？

Posted 2023-02-22

【中文标题】我可以在使用打字稿的材料 ui 中单击时更改框背景颜色吗？

【英文标题】：Can I Change Box background color on click in material ui with typescript?

【发布时间】：2022-01-23 03:58:05

【问题描述】：

我想在我的 Box 被点击时更改它的背景颜色。 OOTB 我找不到可以帮助我的用例的东西。 所以，我尝试使用 onClick 事件，但找不到可以带来所选事件信息并允许我更改样式值的正确事件。

用例 -

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

 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>
        ))

【参考方案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' 
    />
  )

【讨论】：

感谢@Sam，对不起，我想我没有详细说明我的用例，我正在动态创建多个框，一次只能突出显示一个，所以一旦我开始选择框将突出显示每一个点击。

您可以添加一个示例或图像来说明您要实现/构建的目标吗？