Как я могу изменить стиль компонента, когда его родитель находится?

Question

Итак, я использую sass / scss, и мне нужно изменить стиль компонента, когда его родитель находится под навесом.

<Card className="choose-profile-card"
      onClick={() => this.handleChangeCardSelection('investor')}>
   <div className="btn-flat--within" />
</Card>

И я хочу сделать что-то вроде:

.choose-profile-card {
    &:hover {
      box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.1);

      .btn-flat--within {
         background-color: red;
      }
    }
}

Понял?Вот в чем идея, когда .choose-profile-card зависает, мне нужно изменить стиль .btn-flat--within, есть ли способ сделать это?

Answer 1

Должно работать как есть.Возможно, проблема в том, что в <div className="btn-flat--within" /> нет содержимого.попробуйте <div className="btn-flat--within" >some text</div> или добавьте высоту к btn-flat--within классу

jsfiddle: https://jsfiddle.net/f1uz0sah/