Как увеличить кликабельную зону вокруг моего значка перед выбором?

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",
    }}
/>

Answer 1

Вы можете обернуть элемент вокруг PIcon и написать его ширину и высоту следующим образом:

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