カスタム背景色フレックスボックス

Question

フレックスボックスに背景色を設定して、次のようにしてみました。アプリの

クラス定義：フレキシボックスに

<App id="app" class="weight-protocol"> 
</App> 

：CSSファイルで

<FlexBox 
     height="20%" 
     width="100%" 
     alignItems="Start" 
     class="calendar-header-bg" 
     justifyContent="Center"> 

：

.weight-protocol .calendar-header-bg { 
    background-color: #007DB2; 
} 

カスタムの背景色は全くとして適用するつもりはありませんあなたは見ることができます：

コードインスペクタを見て、カスタムCSSクラスは最後にcalendar-header-bgの先頭にとどまります。

Answer 1

.weight-protocolを試しましたか？

.calendar-header-bg { 
    background-color: #007DB2; 
} 

動作しない場合は、!importantタグを使用することができます：あなたはまた、代わりにbackground-colorのみbackgroundタグを使用しようとすることができ

.calendar-header-bg { 
    background-color: #007DB2 !important; 
} 

を：

.calendar-header-bg { 
    background: #007DB2 !important; 
} 

私はこれが役に立てば幸い...

幸運！

Answer 2

FlexBoxには、達成しようとしていることを行ういくつかのCSSがありますか？インスペクタを使用してflexboxを共用するdivを監視します。 あなたはもっと具体的になることができますか？

Answer 3

私はこの問題がセレクタの重要性として知られていると推測しています。つまり、使用しているセレクタ（クラスでネストされたクラス）は全体的にウェイトが小さく、使用しているライブラリ内の別のより重いセレクタによって上書きされる可能性が非常に高いです。例えば、ライブラリはid内のクラス内のクラスを狙っているかもしれません。

私のアドバイスは、開発ツールの中に適用されるスタイルを参照してくださいあなたのスタイルを上書きしているものを参照して、あなたが（それはより具体的な作りで）あなたのセレクタを強くするか、単にあなたのbackground-color宣言の後!importantを追加しますかどうかを判断することです。