0

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.

enter image description here

How do I prevent the div class="Select-control" element from inheriting styles from form-control class of the parent element?

Pubudu Dodangoda
  • 2,742
  • 2
  • 22
  • 38
  • only the 3 properties (darker red) are inherited you cant prevent this afaik, you have to override them if you want a different font-size for example. – Dirk Nov 15 '18 at 13:04
  • override those by your self :`select-control{ font-size: 2rem; line-height: 2.5;}` – לבני מלכה Nov 15 '18 at 13:05
  • you cannot avoid inheritance - css always cascades (kind of given away by the name), the only thing you can do is overwrite the style you do not want to inherit – Pete Nov 15 '18 at 13:16

1 Answers1

0

Hope this works for you, I just renamed the class to "form-control-new", you can add your custom name. Attached image for reference.

you can write your custom css on the new class name.

class-rename-image

Sruthish
  • 43
  • 3
  • 11