reactjs - 如何在选择之前增加我的图标周围的可点击区域？

Question

当它选择背景变为灰色时，我使用了一个可点击的图标。但是当它被取消选中时，图标周围的区域是不可点击的，当它选择时，周围的区域是可点击的。

我尝试更改填充，边距等等，但什么也没有

这是我选择前的图标：

选择后：

因此，当未选择图标时，周围的区域（选择时具有相同大小的灰色）是可点击的，但不适用于选中它。但是，如果它在单击未选中的灰色区域时被选中。

<Icon
    type="book"
    onClick={e => this.onChangeIcon(e, project)}
    style={{
       height: 34,
       width: 44,
       fontSize: 30,
       alignItems: "center",
       justifyContent: "center",
       color:
       "book" === project.imagePath
        ? "white"
        : "#363636",
        backgroundColor:
        "book" === project.imagePath
        ? "#363636"
        : "white",
        borderRadius: "10px",
        marginRight: "10px",
        marginLeft: "10px",
        marginTop: "2px",
        paddingTop: "3px",
        display: "inline-block",
    }}
/>

标签： reactjsantd

Answer 1

您可以将元素包裹起来PIcon并像这样写它的宽度和高度

<div style={{width: '300'; heigth: '400'; cursor: 'pointer'; background: 'transparent'}} onClick={yourEvent}>
    <PIcon />
</div>