Угловая директива не подходит стиль

Question

У меня вопрос о стилях с угловыми директивами. Я импортировал инструкцию bootstrap для progressbars внутри моего проекта. Я использую его внутри класса 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, определяющий область left-workflow.

.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); 
} 

Если я объявляю, что класс внутри области «левый рабочий поток» применяется правильно. Но я хочу сохранить этот стиль, потому что это директива, которая будет использоваться в разных частях моего приложения. Как я могу это сделать?

Answer 1

Наконец-то я решил. Это была глупая ошибка. У меня есть большой файл, в котором я импортирую все мои стили внутри своего проекта, и я полностью забыл включить в него свой новый компонент.

styles.scss

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

Answer 2

Он работает, когда .progress в .left-workflow-area, потому что она порождается как .left-workflow-area .progress, которые имеют более высокий балл, чем по умолчанию  .progress предоставленной бутстраповской CSS.

Если он не работает, когда .progress находится снаружи, он выглядит как по умолчанию .progress переопределяет его. Это может быть вызвано включением css bootstrap после вашего собственного css на странице html или в процессе компиляции. Когда правило css имеет одинаковый балл, применяется последнее, прочитанное браузером.

Так что ставить стиль продавца перед вашим должен решить вашу проблему.

другое примечание: в .progress в цвете фонового цвета отсутствует полутолщина.