How to apply custom CSS to Form.Control in react-bootstrap?

sandeep negi's photo
sandeep negi
·

1 min read

Hey everyone welcome back, if this post helped you in any way, give it a thumbs up or please give your feedback in the comments section.

So without wasting any time let's jump right into the tutorial

I was using the react-bootstrap Form Component but my client needs a custom CSS on top of it 

 <Form.Group className='mb-3' controlId='firstName'>
              <Form.Label>First Name</Form.Label>
              <Form.Control
                type='text'
                className='fnameInput inputCss'
              ></Form.Control>

            </Form.Group>

in the above-mentioned code snipped i have two classes first one is fnameInput and second one is inputCss

I will create one more file for the custom CSS and import that file into the React Component

.inputCss {
  background: #ffffff !important;
  border: 1px solid #6a6a6a !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
}

in the above-mentioned CSS file you can see that I have written some custom CSS and add !important , we need this tag so that we can override the custom CSS of the react-bootstrap component.

Thank you All, Keep Learning and Sharing.

ReactReactive ProgrammingCSS