Javascript 如何在卡介质中嵌入带标签的复选框？

我试着给这东西编码。但是，

CardMedia

不会与复选框一起出现。因此，反应灵敏是一种失败

            <Card>
                <CardMedia
                    component='img'
                    alt=''
                    height='160'
                    image=''
                    title='Image'
                    style={{ backgroundColor: '#DEDBDB',
                             position: 'relative' }}
                />
                {/*<input type='checkbox' id='select'*/}
                {/*       style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
                {/*/>*/}
                {/*<label htmlFor='select'*/}
                {/*       style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
                {/*>選択</label>*/}
                <Box mt={-6} ml={45}>
                    <span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
                </Box>
            </Card>

{/**/}
{/*選択*/}

为此，我还尝试了

FormControlLabel

，这样标签和复选框将放在一起，并使用position:absolute和一些边距对其进行样式设置，结果如下所示

但问题是它没有响应能力，如果使用盒子标签，它就会消失

---

谢谢。

Ciao，您的问题与

FormControlLabel

中标签的

zIndex

有关。事实上，如果您查看页面，您可以在DOM上看到标签，但标签不可见（可能是因为

CardMedia

上的图像始终位于顶部，但这是我个人的意见）

要解决此问题，可以覆盖与

FormControlLabel

关联的标签样式。这是一个codesandbox示例

首先，我定义了一个

CustomCheckbox

：

const CustomCheckbox = withStyles((theme) => ({
  root: {
    // checkbox style example
    // color: "#000000"
    // '&$checked': {
    //     color: "#000000",
    // },
  },
  checked: {}
}))((props) => <Checkbox color="default" {...props} />);

最后，在

makeStyles

中，我进行了覆盖：

  const useStyles = makeStyles(() => ({
    formcontrollabel: {
      "&.MuiFormControlLabel-label": {
        zIndex: 1
      }
    }
  }));

结果是：

标签也会尽可能长时间地响应（在这种情况下，如果您减小屏幕宽度，“标签”一词会出现在新行上）（如果您继续减小屏幕宽度，标签将被剪切）。但这是正常的（因为您定义了类似于

的框）。如果您不喜欢这种行为，您可以使用

隐藏组件来隐藏复选框，并在屏幕处于某个断点下时添加标签，如：

<Hidden smDown>  // if screen width goes under smDown breakpoint, the Hidden content will be hided
   ...
</Hidden>

//如果屏幕宽度低于smDown断点，则隐藏的内容将被隐藏
...
您应该创建一个最小的可复制示例（最好是在上）。谢谢。我知道我必须使用useStyles。没问题：）。是的，我使用它来定制
。MuiFormControlLabel
（因为要做到这一点，我需要调用
makeStyles
）
<Hidden smDown>  // if screen width goes under smDown breakpoint, the Hidden content will be hided
   ...
</Hidden>