Модульные стили. Связь классов в разных компонентах

Есть проект на React.js в котором используются модульные стили. Структура для этого примера: text

разметка в column.js:

<div className={styles.column}>
    <Item/>
</div>

и стили для него в styles.module.scss:

.column{
    width: 200px;
}

разметка в item.js:

<div className={styles.item}>
    <img src="https://via.placeholder.com/30" alt="">
    <span>Name</span>
</div>

и стили для него в styles.module.scss:

.item img{
    display: none;
}

на выходе получается такая разметка:

<div class="ajcv_column__xcvk">
    <div class="cvbn_item__vbnv">
        <img src="https://via.placeholder.com/30" alt="">
        <span>Name</span>
    </div>
</div>

каким образом можно сделать, чтобы при наведении на .column .img внутри item`a принимал значение block?

в обычной ситуации я бы написал

.column:hover .item img{
    display: block;
}

но как это сделать с модульными стилями?


Ответы (0 шт):