переопределить цвет фона материала css

#css #material-ui

#css #материал-пользовательский интерфейс

Вопрос:

Здравствуйте, я пытаюсь переопределить цвет фона материала, который я пробовал разными способами, но все еще не могу его изменить

используя инспектор в веб-браузере, я нашел 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>

при этом внутри события before и after цвет фона сохраняется в части before.

это html, вызывающий материал css:

 <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>

1. попробуйте использовать «!important» вот так: background-color: #009587 !important;

2. могу ли я узнать, для какого html используется этот класс, если я получу больше подробностей об этом, я смогу вам хорошо помочь

3. что именно вы пробовали? пока ваш CSS объявлен после Material CSS и обладает достаточной специфичностью, чтобы переопределить его, вы сможете применить свой стиль без использования !important … Также было бы полезно, если бы вы предоставили общий доступ к HTML для этого ввода, чтобы люди могли его протестировать

4. Мне не удалось воспроизвести проблему с вашим кодом; пожалуйста, рассмотрите возможность добавления фрагмента, который показывает входные данные в том виде, в каком они у вас есть

Ответ №1:

Попробуйте использовать разметку !важно:

 .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 selector.

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