Как применить пользовательскую тему Angular ко всем элементам?

Я создал пользовательскую тему Angular my-theme.scss и включил ее в файл angular.json. Он отлично работает со всеми Angular-Elements, но не применяется к некоторым HTML-элементам в Angular Components.

Пример:

<mat-card class = "example-card">
            <mat-card-header>
                <mat-card-title-group>
                    <mat-card-title>Java</mat-card-title>
                    <img mat-card-sm-image src = "../../../assets/java.png">
                </mat-card-title-group>
            </mat-card-header>
            <mat-card-content>
                <p>
                Put a list here.
                </p>
            </mat-card-content>
</mat-card>

Пользовательская типографика моего файла my-theme.scss будет применяться к заголовку этой карточки:

Но это не будет применяться, например, к чему-либо внутри мат-карты.

Почему это и как я могу это исправить?

css angular scss-mixins custom-theme

18.04.2023 18:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем styles.scss вам нужно будет применить свой шрифт к вашему телу: (Рабочий пример с Angular/Материалом 15)

@use "@angular/material" as material;

$custom-typography: material.define-typography-config(
  $font-family: "'Open Sans', sans-serif",
);
@include material.typography-hierarchy($custom-typography);

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif; // <-- Add this
}

Мой Бог. Большое спасибо. Я все думал и удивлялся. В общем, мне больше не нужен мой обычный 'styles.css', и я могу написать все в пользовательской теме 'my-theme.scss'. Оно работает! Потрясающий.

— 18.04.2023 18:38

18.04.2023 18:32