HTML / CSS: как избежать наследования стилей от родительского класса (используя response-select с начальной загрузкой)

Я столкнулся с проблемой стиля при попытке использовать response-select с bootstrap css.

Это возможно общая проблема, не имеющая ничего общего с этими библиотеками. Я не уверен на 100%.

Вот демонстрация codeandbox, чтобы показать проблему, с которой я столкнулся. https://codesandbox.io/s/k0325onrk3

Проблема, насколько я понимаю, в том, что дочерний элемент div class="Select-control" наследует стили от родительского класса (form-control).

Изменить: Один из вариантов - переопределить стили самостоятельно, один за другим. Но я считаю, что это сложно и не масштабируемо. Я заметил элементы, наследующие стили, учитывая каскадный характер CSS, но я впервые вижу элемент, наследующий целый класс CSS от родителя. Я что-то упустил?

Редактировать 2 (ответ): Оказывается, проблема заключалась не в наследовании класса от родителя. Странное поведение было связано с тем, что в response-select появился новый элемент, похожий на select. По сути, класс form-control в начальной загрузке предполагает, что его дочерний элемент является текстом (или чем-то без стилей, таких как границы), и, следовательно, добавляет отступ. Но фактический дочерний элемент, представленный response-select, - это еще один элемент, который имеет стили, похожие на form-control. Таким образом, ребенок демонстрирует это странное поведение. Таким образом, решение состоит в том, чтобы переопределить стили в классе form-control, а не в дочернем (что я предполагал сначала).

Когда я просматриваю этот элемент с помощью хрома, я вижу следующее.

Как запретить элементу div class="Select-control" наследовать стили от класса form-control родительского элемента?