.modal-content for different Modals (react-bootstrap)

I'm using the Modal-component from react-bootstrap.

I have two different Modals in my application and I want one of them to have an orange background color.

I can achieve the orange background color by doing:

.modal-content {
  background: #FF8C0A;
}

However, this will make both of the modals in my application orange. I can't find a way to label the modal-content with an unique ID to edit just one of them. Can the "dialogClassName" prop maybe be used in some way?

Note: I've already tried giving the head and body IDs and making their background color orange. This works on desktop, however, on mobile devices there is a transparent line between the header and body in which doesn't look good.

Thank you!

Screenshot of the implementation of the Modal

Solved

You can use CSS nesting to target children of the components, For eg, In your case,

You named your modal using dialogClassName prop to info-modal, you can use this in ur CSS

info-modal .modal-content {
  background: #FF8C0A;
}

Similarly for other modals, you can pass different name using dialogClassName prop

other-modal-1 .modal-content {
  background: red;
}

other-modal-2 .modal-content {
  background: green;
}

You can use "CSS modules" package for achieving this.

There are useful links for learning and implementing CSS modules..

• https://www.javascriptstuff.com/css-modules-by-example/
• https://css-modules.github.io/webpack-demo/