CSS модуль `:hover .child` не работает

Question

У меня есть следующие scss:

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    padding: 3em;
    .d-none {
      display: inline-block !important;
    }
  }

  &:hover .d-none {
    display: inline-block !important;
  }
}

При наведении padding:3em но не работает как вложенное, так и встроенное дочернее правило, т.е. .d-none класс не был отменен.

Как правильно написать правило с помощью модуля CSS?

Я пробую CSS-модуль с CRA и пользовательские реагирующие скрипты с sass а также modules включенный (REACT_APP_SASS_MODULES=true).

Или, возможно, я должен использовать styled components вместо? Пытался выяснить, какой пойти для реагирования приложений.

Answer 1

Вы можете попробовать этот код, чтобы решить вашу проблему

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 3em;
  background: red;
  &:hover {
    &.d-none {
      background: black;
      color: #fff;
      padding: 20px;
    }
  }
}

.d-none {
  background: green;
  color: #fff;
  padding: 20px;
}


<div class="skillBox">
  Parrent
  <div class="d-none">Childred</div>
</div>

Exmaple:: https://codepen.io/anon/pen/yqQNJX CodePen

Answer 2

В случае если элемент с skillbox а также d-none класс братьев и сестер ниже это CSS для этого

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    padding: 3em;
  }
}

.dnone {
  display: none;
}

.skillBox:hover ~ .dnone {
  display: inline-block;
}

http://jsbin.com/hixamotuku/edit?html,css,output

Answer 3

Поэтому я понимаю, что CSS-модули создали собственное имя класса для .d-none и применение этого имени класса сработало.

Поэтому я полностью изменил имя класса, сделав его совершенно новым классом, который переопределяет .d-none,

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  &:hover {
    .dNone {
      display: inline-block !important;
    }
  }
}

И применяя, добавляя их как массив, затем соединяя их вместе:

<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />

Answer 4

Нет ничего плохого в вашем CSS. Смотрите демо ниже.

.skillBox {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 20px #ccc;
  padding: 1em;

  .d-none{
    display: none;
  }

  &:hover {
    padding: 3em;
    .d-none {
      display: inline-block;
    }
  }
}

https://codepen.io/paulcredmond/pen/djQoow