CODEWITHSUNDEEP
javascriptcssreactjsmodal-dialogreact-bootstrap
sune
sune

Reputation: 93

.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

Upvotes: 2

Views: 3364

Answers (3)

deathfry
deathfry

Reputation: 744

set backdropClassName="red" in your modal

and in CSS

.red {
    background: none !important;
}

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9376

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;
}

Upvotes: 1

Hayreddin Tüzel
Hayreddin Tüzel

Reputation: 949

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

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

Upvotes: 0

Related Questions