Детский комбинатор применяется к родителю в производстве

Question

Для моего приложения React у меня есть небольшой пример узла со следующей структурой:

<div className='main'>
      <input/>
</div>

Для моего CSS у меня есть следующее:

.main > input {
    background-color: blue;
}

При отладке это работаеткак и предполагалось, и вход синий.Однако, когда приложение опубликовано, оно не отображается так, как задумано.Вместо этого CSS показывает это:

.main {
    background-color: blue;
}
.main > input {
    background-color: blue;
}

У меня нет других файлов CSS, которые имели бы дополнительный CSS.Это проблема с тем, как Webpack обрабатывает файлы для производства?Или это побочный эффект детских комбинаторов, о которых я не знал?Или я должен искать причину этой проблемы в другом месте?

Answer 1

Просто дайте класс или идентификатор, и измените CSS через это.

#id1 {
  background-color: blue;
}

<div className='main'>
  <input id='id1' />
</div>