Карта React Youtube. Кнопка воспроизведения не отображается должным образом в CSS ⇐ CSS

[Anonymous]

Ниже приведен пример, в котором я пытаюсь отобразить карточку YouTube. Проблема, с которой я столкнулся, заключается в том, что белый фон кнопки воспроизведения не подстраивается под значок воспроизведения, который я настраиваю с помощью стилей CSS. Я пытаюсь понять, почему это не работает.
Кроме того, когда я навожу курсор на карточку, я должен видеть фон с надписью «Видеотест», но он никогда не отображается.
https://stackblitz.com/edit/ndu1t6?file ... beCard.tsx
Почему эта часть вызывает проблемы ?
'&:hover': {
transform: 'scale(1.05)',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
},
'&:hover $overlay': {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
'&:hover $textOverlay': {
opacity: 1,
},
'&:hover $playButton': {
opacity: 0,
},


Подробнее здесь: https://stackoverflow.com/questions/790 ... rly-in-css