覆盖材质背景颜色 css答案

【问题标题】：override material background color css覆盖材质背景颜色 css
【发布时间】：2019-03-13 18:56:16
【问题描述】：

您好，我正在尝试覆盖材质背景颜色，我尝试了不同的方法仍然无法更改

在网络浏览器上使用检查器找到包含我想要更改的 css

.form-control-wrapper .material-input::before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s;}

我尝试更改此代码，但材质颜色仍然存在，有什么想法吗？谢谢

添加更多内容

<span class="material-input"></span>

这在之前和之后的事件中，之前的部分包含背景颜色。

这是调用css材料的html：

<div class="row">
                                <div class="col-lg-8 col-lg-offset-2">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span id="icon" class="mdi mdi-social-person"></span></span>
                                        <input name="message" id="message" type="text" class="form-control" placeholder="Choose an username" aria-describedby="basic-addon1" maxlength="768">
                                        <span class="input-group-btn">
                                            <button id="send" class="btn btn-primary btn-flat">Connect</button>
                                        </span>
                                    </div>

【问题讨论】：

尝试像这样使用“！important”：背景颜色：#009587 !important;
我能知道这个类用于哪个 html，如果我得到更多关于这个的细节，我可以帮助你很好
您到底尝试了什么？只要您的 CSS 在 Material CSS 之后声明并且具有足够的特异性来覆盖它，您应该能够在不使用 !important 的情况下应用您的样式...此外，如果您共享此输入的 HTML 也会有所帮助，这样人们就可以测试一下
感谢您的评论我已经放置了html代码。
我无法用您的代码复制问题；请考虑添加一个显示输入的 sn-p

标签： css material-ui

【解决方案1】：

尝试使用标记 !important：

.form-control-wrapper .material-input::before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 2px;
    background-color: #009587 !important;
    bottom: -1px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: -webkit-transform 0s;
    transition: transform 0s;
}

它强制这个属性超过所有其他集合

【讨论】：

感谢您的快速回复是的，我已经尝试了覆盖材料颜色的重要方法

【解决方案2】：

不要听上面的评论。使用 !important 不是最佳实践。要覆盖在 html 中不可见/不使用的材质样式，您应该使用 ::ng-deep 伪类选择器，最好将它与 :host 选择器一起使用。

:host {
    ::ng-deep {
        .form-control-wrapper .material-input::before {
            background-color: #009587;
        }
    }
}

【讨论】：