Question

我对使用angularJs指令的样式有疑问。我在项目中为progressbars导入了一个bootstrap指令。我在我创建的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>

我想要的是塑造＆＃34;进步＆＃34;和＆＃34;进度条＆＃34;类。我有一个定义左工作流区域的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);
}

如果我在＆＃34; left-workflow-area＆＃34;中声明该类。正确应用。但是我希望保持这种风格，因为这是一个将在我的应用程序的不同部分使用的指令。我怎么能这样做？

Answer 1

当.progress位于.left-workflow-area时，它有效，因为它生成为.left-workflow-area .progress，其得分高于bootstrap css提供的默认 .progress。

如果.progress在外面时不起作用，则看起来默认的.progress会覆盖它。它可能是由hst页面或编译过程中你自己的css之后的bootstrap css包含引起的。当css规则具有相同的分数时，将应用浏览器的最后一次读取。

因此，将供应商的风格放在您的风格之前应解决您的问题。

另一个注意事项：在.progress中，背景颜色规则中缺少一个半冒号。

Answer 2

最后我解决了。这是一个愚蠢的错误。我有一个大文件，我在项目中导入所有样式，我完全忘记在其中包含我的新组件。

styles.scss

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

Angular指令不是aplying风格

2 个答案: