Switch stylesheet in single page app

Question

We have a single page app built with angular that contains various features within.

One of these features is a drag and drop interface for snippets of code. Each of these snippets has its own styles that are styled separately from the rest of the admin panel.

The main part of the app is styled using a bootstrap theme but the drag and drop snippets are not and so when navigating into the drag and drop section the snippets inherit some of the bootstrap styles.

This causes a variety of problems styling wise and am looking for a solution ideally without using iframes or having to override bootstrap styles. Ideally we would unload the bootstrap and then only load in the new styles, or have the new content not inherit styles.

Is there anyway to achieve this without reloading the app or using an iframe? Switching stylesheet or injecting new styles into the page and removing others?

Answer 1

I can think of two options:

1. Remove the stylesheet element
   Before displaying your problematic content, remove the LINK element (worth keeping it as a reference for later.

   var element = document.querySelector('link[href~="bootstrap.css"]'); 
   document.removeChild(element);
   

   When you want to return the Bootstrap styling you can just re-append it.

   document.head.appendChild(bootstrapLinkElement);
   

2. Override the Bootstrap CSS rules
   Create a set of rules that override and/or reset the Bootstrap rules. You can nest them under a parent selector (e.g. .no-bootstrap) so they will affect only specific elements.
   To make things easier you can get Bootstraps precompiled source code (LESS or SASS) and edit it to incorporate an override stylesheet.

Edit: fixed typo