Angular : How do i override directive's style in my view?

Question

我在我的 View 中调用 error-stuff 指令，如下所示，我试图覆盖指令的填充 15px 到 0px 在我的 View 中这是行不通的。所以我的 div1 的值和 div2 的值不在一条直线上，因为在我看来 div2 需要更多的填充。

 Error:
          Oops !!! Its look like something going wrong !!! Please try again later ...


<div id="div1" class="row">
   <div  class="pull-left">
      <span>Error :</span>
   </div>

    <div id="div2" style="padding:0px; vertical-align:top">
        <error-stuff></error-stuff>
    </div>
</div>

error-stuff 指令的 html 模板如下

<div class="error-class">
   <span>Oops !!! Its look like something going wrong !!! Please try again later 
    ...  </span>
</div>

在我的 app.css 中

.error-class
{
margin-bottom:20px;
padding:15px;
box-sizing:border-box;
line-height:1.5;
font-size:15px;
}

那么如何通过覆盖指令 padding:15px 到 padding:0px 使 div1 和 div2 内容成直线？

Answer 1

假设 error-stuff 在其他地方使用，并且您不能更改全局 css，在这种情况下，您可以通过在 css 中指定父级来使用有针对性的覆盖

#div2 .error-class {
    padding: 0;
}