Предотвратить глобальный CSS, применяемый компонент в Angular 5 - PullRequest
Новая
       19

Предотвратить глобальный CSS, применяемый компонент в Angular 5

0 голосов
/ 05 июля 2018

В .angular-cli.json я получил несколько глобальных стилей: 

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

Но я не хочу, чтобы какие-либо из них применялись к определенному компоненту - это достижимо?

РЕДАКТИРОВАТЬ 1:
К сожалению, переопределение стиля CSS в стиле компонента не будет работать, потому что HTML в шаблоне компонента извлекается из бэкэнда Web API - думаю, я не могу реально переопределить все возможные классы / селекторы?

Ответы [ 4 ]

0 голосов
/ 05 июля 2018

CSS-каскады (отсюда и термин, каскадные таблицы стилей). для полной поддержки браузера вы можете переопределить селекторы.

другой вариант, не столь распространенный из-за отсутствия поддержки в IE и Edge , это свойство all.

HTML 

<div class="component-container">
  <!-- your components html template ... -->
</div>

CSS 

.component-container {
  all: initial;
  all: unset;
}
0 голосов
/ 05 июля 2018

Использование стилей компонентов Для каждого компонента Angular, который вы пишете, вы можете определить не только шаблон HTML, но также стили CSS, которые идут с этим шаблоном, указав любые селекторы, правила и медиазапросы, которые вам нужны.

Один из способов сделать это - установить свойство styles в метаданных компонента. Свойство styles принимает массив строк, которые содержат код CSS. Обычно вы указываете одну строку, как в следующем примере: 

@Component({
  selector: 'app-root',
  template: `
    <h1>Test Text</h1>      
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class AppComponent {
/* . . . */
}

styleUrls
Один или несколько URL-адресов для файлов, содержащих таблицы стилей CSS для использования в этом компоненте. 

styleUrls: string[]

стили
Одна или несколько встроенных таблиц стилей CSS для использования в этом компоненте. 

styles: string[]
0 голосов
/ 05 июля 2018

Вы можете использовать селектор :not в своем глобальном CSS.

Вы должны поиграться с ним, чтобы получить желаемое поведение, но оно должно быть примерно таким: 

h1:not(.my-specific-class) {
  font-size: 3rem;
}
0 голосов
/ 05 июля 2018

Вы можете определить стили на уровне компонента, используя свойство styleUrls внутри области действия @Component. Пожалуйста, посмотрите на код ниже: - 

@Component({
selector: 'app-manageUser',
templateUrl: './manageUser.component.html',
styleUrls: ['./manageUser.component.css'],
providers: [UserService]
})
...