2017-11-23 10 views
0

ローカルのscssを使ってReactのWebサイトを作成し、CSSファイルにコンパイルしました。 しかし、今では、コンポーネントの1つでは、ブートストラップを使用したいと考えています。ブートストラップは1つのコンポーネントにしかインポートされません

私はhttps://reactstrap.github.io/をフォローして動作させました。私はその後、index.js外の輸入を取り、私のコンポーネントに配置した場合、私は私のindex.jsファイル

にこの

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

を持っているので、しかし、ブートストラップは今、すべてのサイトに適用され、ブートストラップはまだに適用されますサイト全体。

このコンポーネントにはブートストラップをインポートしなければなりません。このコンポーネントには、何らかの形のReact CSSモジュールの読み込みを使用する必要がありますか? cssファイル全体のブートストラップの範囲を制限する方法はありますか?

私はそれが再び

答えて

1

あなたは自分のニーズにブートストラップをカスタマイズすることができ追加することができます

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

以下の擬似コードは、Javascriptでこのような何かを動的に行うことができることを知っていますか?

あなたは、ブートストラップのWebページにそのオプションがあります。必要なコンポーネントに適用する必要があるコンポーネントを選択するだけです。

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

私はそれはあなたと同じ問題ですが、かなり類似している場合はそのイムはかなり確実ではない、あまりにもこの記事を見つけました:

How to make React CSS import component-scoped?

別の同様の記事を:

Limit the scope of bootstrap styles

あなたがチェックアウトする場合があります。

+0

声援は非常に役に立ち、あなたの答えを上げました – Rory

関連する問題