Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.5k views
in Technique[技术] by (71.8m points)

reactjs - Import bootstrap but only into one component

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...