Блог

Главная - Вопросы по программированию - Как мне переопределить стили начальной загрузки по умолчанию?

Как мне переопределить стили начальной загрузки по умолчанию?

#css #angular

#css #angular

Вопрос:

Я работаю над веб-страницей, основанной на Angular и использующей Bootstrap. Когда я добавляю модуль Angular, создается файл .scss. Однако, даже с моим файлом .ts, в котором my .scss указан как styleUrl, на странице по-прежнему используются стили перезагрузки начальной загрузки.

В частности, я пытаюсь просто изменить цвет фона страницы прямо сейчас, но, похоже, это невозможно. Все, что меняется, — это область, также определенная этим странным полем jumbotron.

Может быть, мне нужно указать в моем html-коде, что я хочу использовать таблицу стилей? Я думал, что уже сделал это, связав таблицу стилей в my .ts.

Вот мой код для component.ts и component.scss, а также скриншот из инспектора в Chrome:

.ts

 import {Component, OnInit} from '@angular/core';
import {AuthService} from '../../services/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

.scss

 .jumbotron {
  background: none
}
body {
  background-color: #7EF911
}

инспектор

Как мне определить мой css как более важный, чем стандартные элементы bootstrap?
Большое вам спасибо!

Комментарии:

1. Можете ли вы поделиться своим визуализированным DOM?

2. у вас должен быть какой-то глобальный файл стиля css / scss. Обычно он находится в src папке, и вы можете изменить его в angular.json , под styles массивом (для массивов dev и prod)

3. @ra.design Что такое отображаемый DOM? Как мне его найти?

4. @Dmitriy Есть один, да, но почему он переопределяет мой scss для моих компонентов? Если я изменю это на нужный мне цвет, это тоже ничего не даст. Он также был настроен на другой цвет, прежде чем я даже понял, что он есть, и это, по-видимому, ни на что не повлияло…

5. @Konsti Lackner, попробуйте добавить один (после начальной загрузки) и создать соответствующий файл. Затем добавьте туда свои стили, что-то вроде "src/scss/main.scss" , зависит от того, используете ли вы препроцессор. Ну, если вы настраиваете глобальные стили, это то место, где они принадлежат

Ответ №1:

Чтобы переопределить стиль начальной загрузки, попробуйте использовать ng-deep 

 :host ::ng-deep .jumbotron {
  background: none
}
:host ::ng-deep body {
  background-color: #7EF911
}
Метки: