Bootstrap importieren, aber nur in eine Komponente

Question

Ich habe eine React-Website mit einem lokalen scss in CSS-Datei kompiliert. Aber jetzt möchte ich in einer und nur einer der Komponenten Bootstrap verwenden.

Ich habe https://reactstrap.github.io/ gefolgt und habe es funktioniert. Aber Bootstrap nun auf alle Website angewendet wird, weil ich diese haben

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

in meiner index.js Datei

Wenn ich dann aus index.js den Import nehmen und sie in meiner Komponente wird Bootstrap noch angewendet die gesamte Website.

Muss ich Bootstrap in diese Komponente importieren und nur diese Komponente mit einer Form von React css-modul loading? Gibt es eine Möglichkeit, den Umfang von Bootstraps gesamte CSS-Datei zu beschränken?

Ich weiß, dass Pseudo in javascript so etwas, Code unter

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

dann kann es wieder

Answer 1

hinzugefügt werden dynamisch getan werden könnte, könnten Sie einfach Bootstrap an Ihre Bedürfnisse anpassen?

Sie haben diese Option in der Bootstrap-Webseite. Wählen Sie einfach die Komponenten aus, die Sie für die Komponente benötigen, die Sie benötigen.

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

ich auch diesen Beitrag gefunden, die im nicht ganz sicher, ob es das gleiche Problem wie bei Ihnen ist, aber ist ganz ähnlich:

How to make React CSS import component-scoped?

Ein weiterer ähnlicher Beitrag:

Limit the scope of bootstrap styles

Sie können es überprüfen.