1

I'm creating a basic form, and I'm finding it impossible to override any bootstrap elements without using !important. For example, a basic form with a first name input, using a custom class "custom-input"

.js 

<Form>
  <Row>
    <Col>
      <Form.Group>
         <Form.Control
            type="name"
            placeholder="First Name"
            className="custom-input"
          />
      </Form.Group>
   </Col>
 </Row>
</Form>

.css

.custom-input{
    border: 0
}

This does not remove the border unless I add !important to it. Why does it require !important?

Code Wiget
  • 1,540
  • 1
  • 23
  • 35

2 Answers2

1

You need to understand how CSS style apply order works. Basically there are four rules:

  • inline css overrides css rules in style tag and css file
  • a more specific selector takes precedence over a less specific one
  • rules that appear later in the code override earlier rules if both have the same specificity.
  • A css rule with !important always takes precedence.

Also, there are selector weights which priorities styles:

  • 1000 points inline styling
  • 100 points for IDs
  • 10 points for classes and pseudo-classes
  • 1 point for tag selectors and pseudo-elements

Check this answer for more details how CSS apply order works. Also check this for how to customize bootstrap in right way.

Sadik
  • 245
  • 1
  • 3
  • 13
  • I definitely understand this. Read it 50x, but no one tells you which classes to override is the issue and how do you know even which classes to override – Code Wiget Sep 23 '19 at 13:24
1

Instead of trying to battle the default classes with custom classes. You can use dev tools and see how it renders on the front-end and style those classes. For example:

<Form.Group controlId="formBasicEmail">
  <Form.Label>Email address</Form.Label>
  <Form.Control type="email" placeholder="Enter email" />     
</Form.Group>

Becomes:

<div class="form-group">
  <label class="form-label" for="formBasicEmail">Email address</label>
  <input placeholder="Enter email" type="email" id="formBasicEmail" class="form-control">
</div>

So you can just write the css:

.form-control {
    border: 0;
}

This way you can style what they use in react bootstrap components instead of trying to override every style. This way you do not have to use !important

Or you can double check to see that your css is below the bootstrap styling so you can override the style.

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
  • This. This is it. I couldn't figure out which classes to override, as far as I could tell it was a guessing game! But using the inspector I can seel form-control. But form-control didn't work, I had to use ```.form-group .form-control```, so how many parent levels up should you usually go? And is there any reference for bootstrap react that has this information, or is it trial & error with the developer console? – Code Wiget Sep 23 '19 at 13:26
  • I mean three is a general suggestion I have heard from other developers. It is a lot of trial and error though – brooksrelyt Sep 23 '19 at 13:31