Import bootstrap but only into one component

Question

I have a React web site using a local scss compiled to css file. But now I want in one and only one of the components to use Bootstrap.

I've followed https://reactstrap.github.io/ and got it working. But bootstrap is now applied to all the site, because I have this

import 'bootstrap/dist/css/bootstrap.min.css';

in my index.js file

If I then take the import out of index.js and place it in my component, bootstrap is still applied to the entire site.

Do I have to import bootstrap into this component and only this component using some form of React css-module loading ? Is there a way of restricting the scope of bootstraps entire css file ?

I know that in javascript something like this could be done dynamically, pseudo code below

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

then it can be added again

Answer 1

You could just customize bootstrap to your needs?

You have that option in the bootstrap web page.. Just select the components you need to apply to the component you need.

https://getbootstrap.com/docs/3.3/customize/

I found this post too, which Im not quite sure if it is the same problem as yours but is quite similar:

How to make React CSS import component-scoped?

Another similar post:

Limit the scope of bootstrap styles

You might want to check it out.