【问题标题】:How to overwrite custom component css in angular 8如何在 Angular 8 中覆盖自定义组件 css
【发布时间】:2020-05-27 14:19:25
【问题描述】:

我试图覆盖自定义组件选择器的 css,但它不起作用。我试过:ng-deep 没有成功。我该如何找到解决方案?

app.component.html:

<mycustommcomp></mycustommcomp>

app.component.css:

::ng-deep mycustommcomp{ 
margin:2px;
overflow:unset !important; 
}

mycustomcomp.component.css:

mycustommcomp{ 
margin:8px;
overflow:hidden !important; 
}

演示:https://stackblitz.com/edit/angular-vsdzqs?file=src/app/app.component.css

【问题讨论】:

    标签: css typescript angular7 angular8


    【解决方案1】:

    您不能这样做,因为样式不能应用于组件标签。使其工作的一种方法是使用容器(例如 div)将 mycustommcomp 中的内容包装起来。

    mycustommcomp.component.html:

    <div class="container">
       <!--Content here-->
    </div>
    

    app.component.css:

    ::ng-deep .container{ 
       margin:2px;
       overflow:unset !important; 
    }
    

    mycustomcomp.component.css:

    .container{ 
       margin:8px;
       overflow:hidden !important; 
    }
    

    尽管如此,请避免这样做,因为 ::ng-deep 是 deprecated

    【讨论】:

    • 不要使用类。我想覆盖选择器 mycustommcomp css
    猜你喜欢
    • 2012-10-14
    • 2020-02-16
    • 1970-01-01
    • 2019-10-23
    • 1970-01-01
    • 2021-06-15
    • 2022-08-19
    • 2021-11-12
    • 1970-01-01
    相关资源
    最近更新 更多