When attempting to use react-select with Bootstrap CSS, I am encountering a styling problem.
This issue may not be related to these libraries specifically. I cannot say for certain.
For a demonstration of the problem I am facing, you can view this codesandbox demo: https://codesandbox.io/s/k0325onrk3
From what I understand, the child element div class="Select-control" is inheriting styles from the parent class (form-control).
Edit: One potential solution could involve manually overriding the styles one by one. However, I find this approach difficult and not sustainable. While I am familiar with elements inheriting styles due to the cascading nature of CSS, it is unusual for an element to inherit an entire class from its parent. Am I overlooking something?
Edit 2 (Answer): It appears that the issue was not caused by inheriting the class from the parent. The strange behavior stemmed from react-select introducing a new element similar to a select. The form-control class in Bootstrap assumes its child to be text or something without styles like borders, adding padding accordingly. However, the actual child introduced by react-select has similar styles to form-control, resulting in the odd behavior. To address this, it is necessary to override the styles in the form-control class rather than on the child element (as initially thought).
Upon inspecting the element with Chrome, I see the following:
https://i.sstatic.net/yTXDU.png
How can I prevent the div class="Select-control" element from inheriting styles from the form-control class of its parent element?