Django templates wrapping React app bootstrap CSS bleeding through to react components

[marksmall]

Hi there, I've got an app I've inherited with a complicated UI, it is a Django templated app, that uses Bootrap v5.3.3. However, it also wraps/pulls in a React SPA app that sits in a CDN, that doesn't use Bootrap, just raw SCSS.

What I'm noticing is that when I use a ul or a custom Accordion component for instance in the React app, it all looks great while developing that app, but when deployed and sitting inside a Bootstrap styled django app, I'm seeing some bleed-through of Bootstrap CSS being added or overriding the React app's CSS.

Of course this is bad design, but it is in maintenance mode and I'm unable to re-achitect, so I'm wondering the best way forward. I guess I'm asking the community if:

1. there is a way to ignore bootstrap in some circumstances.
2. If I added something like normalize.css to the react app, would it prevent this bleed-through.
3. Is there anything else I should try.

There are no silly ideas on this one (ignoring the existing architecture of the app....), whatever ideas you have are welcome, thanks.

[julien-deramond]

Hi @marksmall

I’m not entirely sure I grasped the full architecture, but here's a possible idea to explore.

I assume that at some point bootstrap.css gets loaded, and our reboot rules apply across the entire app, potentially causing conflicts. For example, the following rule would affect all ol, ul elements globally:

bootstrap/dist/css/bootstrap.css

Lines 288 to 291 in dcec1df

	ol,
	ul {
	padding-left: 2rem;
	}

Depending on how Bootstrap is being loaded, you might be able to encapsulate all the Bootstrap CSS within a .fake-class Then, you would apply this class only to the part of the app where Bootstrap is being used. This way, any other parts of the app that aren't supposed to use Bootstrap would be unaffected by styles like the ol, ul rule, since they wouldn't have the .fake-class in the DOM.

However, this approach would only work if the Bootstrap section is isolated within the app and isn't the main framework in use. And also, if Bootstrap is not loaded with the CDN; so built via Sass like this (or downloaded manually).

Another weird idea—though a bit unconventional—if Bootstrap is the primary framework and there are other non-Bootstrap components embedded in the page: Instead of using a .fake-class, you could try wrapping the entire Bootstrap CSS with something like :not(.exclude-bootstrap). This way, wherever you want to prevent Bootstrap's default styles from applying, you could add the .exclude-bootstrap class.

I haven't tested obviously these things. Even if they can't work or are dumb (sorry for that), I hope they could lead you to some new ideas to resolve your problem :)