アペラシオンではないアングル・ディレクティブ

Question

私はangularJsディレクティブのスタイルに関する質問があります。私は私のプロジェクトの中に進捗バーのためのブートストラップ指令をインポートしました。私は作成したdivクラスの中でそれを使用しています。

<div class="diagnostics-widget-modal"> 
    <div class="modal-header"> 
     <h3>SOME CONTENT</h3> 
    </div> 
    <div class="modal-body"> 
     <div class=left-workflow-area> 
      <uib-progressbar value="55"></uib-progressbar> 
     </div> 
    </div> 
</div> 

私のページを実行すると、指示文htmlが正しく表示され、そのコードが次のようになります。

<div class="modal-body"> 
    <div class="left-workflow-area"> 
     <div class="progressbar ng-isolate-scope" value="55"> 
       <div class="progress"> 
        <div class="progress-bar" ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent < 100 ? percent: 100) + '%'}" aria-valuetext="%" aria-labelledby="" ng-transclude="" style="width: 100%;"> </div> 
       </div> 
     </div> 
    </div> 
</div> 

私が欲しいのは、「進行」と「進行状況」のクラスをスタイルすることです。私は左側のワークフロー領域を定義するscssを持っています。

.diagnostics-widget-modal { 
    height: 100%; 
    width: 100%; 

    .modal-header { 
     height: 71px; 
     padding: 0 12px 0px 36px; 
     display: flex; 
     flex-direction: row; 
     align-items: center; 
     justify-content: space-between; 

     .modal-close { 
      width: 72px; 
      height: 72px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
     } 
    } 

    .modal-body { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    height: 90%; 

    .left-workflow-area { 
     display: flex; 
     width: 70%; 
     height: 100%; 
    } 

    .right-workflow-area { 
     display: flex; 
     width: 30%; 
     height: 100%; 
    } 
} 

私は、ディレクティブに適用されていないスタイルファイルを持っています。

.progress { 
    height: 20px; 
    margin-bottom: 20px; 
    overflow: hidden; 
    background-color: #f5f5f5 
    border-radius: 4px; 
    box-shadow: inset 0 1px 2px rgba (0,0,0,.1); 
} 

"left-workflow-area"内のクラスが正しく適用されていると宣言した場合。しかし、私はこのスタイルをappartのままにしておきたいのですが、これは私のアプリのさまざまな部分で使用される命令です。これどうやってするの？

Answer 1

最後に私はそれを解決しました。それは愚かな誤りだった。私は自分のプロジェクト内ですべてのスタイルをインポートする大きなファイルを持っており、新しいコンポーネントをプロジェクトに組み込むことを完全に忘れてしまった。

styles.scss

@import 'molecules/header'; 
@import '../components/dropdown/dropdown'; 
@import '../components/progressbar/progressbar'; 
@import '../components/keyboard/keyboard'; 

Answer 2

それはブートストラップCSSで提供されるデフォルト .progressよりも高いスコアを持っている.left-workflow-area .progressとして生成されるため、.progressが.left-workflow-areaのときにそれは動作します。

.progressが外部にあるときに機能しない場合は、デフォルトの.progressで上書きされているように見えます。ブートストラップのCSSがhtmlページやコンパイルプロセスで独自のCSSの後にインクルードされている可能性があります。 CSSルールのスコアが同じ場合は、ブラウザで最後に読み取られたルールが適用されます。

あなたの前にベンダーのスタイルを置くことで、問題を解決できるはずです。

別の注記：進行中では、背景色のルールにセミコロンがありません。