I am facing a styling issue when trying to use react-select with bootstrap css.
This maybe a generic issue which has nothing to do with these libraries. I am not 100% sure.
Here is a codesandbox demo to show the issue I am facing. https://codesandbox.io/s/k0325onrk3
The issue, as I can understand, is that the child element div class="Select-control" is inheriting styles from the parent class(form-control).
Edit: One option here would be to override the styles by my self, one by one. But I feel that's hard and not scalable. I do have noticed elements inheriting styles given the cascading nature of CSS, but this is the first time I am seeing an element inheriting a whole class of CSS from the parent. Am I missing something here?
Edit 2(Answer): Turns out, the issue was not with inheriting the class from the parent. The weird behaviour was due to react-select introducing a new select like element. Basically, form-control class in bootstrap assumes its child to be text (or something without styles like borders) and hence adds a padding. But the actual child introduced by react-select is another element which has similar styles to form-control. Thus the child shows this weird behaviour. So the solution is to override the styles in form-control class and not in the child(Which I assumed at first).
I can see the following when I inspect that element with chrome.
How do I prevent the div class="Select-control" element from inheriting styles from form-control class of the parent element?
select-control{ font-size: 2rem; line-height: 2.5;}