CODEWITHSUNDEEP
reactjsmodal-dialogreact-bootstrap
Jack
Jack

Reputation: 11

How to pass a custom css class into a react modal?

I am using react-bootstrap's Modal in my project. In the Modal component, there is a button:

<Modal ...>
 <Modal.Body>
  <button type="button" className="btn printBtn" onClick=  {this.validateUser}>Send</button>
 </Modal.Body>
</Modal>

in which, "printBtn" is a custom css class defined in a top level .css file. But it does not work. I have spent a few hours on this issue without luck. Can anyone please help?

Thanks, Jack

Upvotes: 1

Views: 2694

Answers (2)

gabo
gabo

Reputation: 1261

I was having the same issue. I was trying to style a button and a paragraph inside a modal, my class was being applied to the element but not the styles.

I think this is because the div modal is inserted outside of the root react div. Try moving your styles to your index.html inside a style tag in the header section, it worked for me. I don't love the solution but it should work.

Upvotes: 0

kelongshi
kelongshi

Reputation: 111

You should add the btn- prefix when you want to add your custom className to the Button component.

Read the caption custom-styles.

Upvotes: 1

Related Questions