Индивидуальный стиль для подсказки по материалу в Angular 17

У меня есть приложение angular 17 с новейшими компонентами Material.

Я широко использую компонент Tooltip, и у меня возникают проблемы с его настройкой.

Мне удалось изменить размер шрифта, используя следующий код в CSS:

$tt-typography: mat.define-typography-config(
    $caption: mat.define-typography-level(16px, 1, 400)
);

@include mat.tooltip-typography($tt-typography);

Но это касается только размера и насыщенности шрифта. Я также хотел бы настроить высоту строки, ширину всплывающей подсказки и так далее.

Могу ли я сделать это с помощью этого кода? Если да, то какие еще опции я могу установить в нем для этих целей?

Я должен упомянуть, что я уже пробовал различные селекторы CSS, которые должны переопределять значения по умолчанию для Материала (что, очевидно, является самым простым и легким способом, если это возможно), но пока безуспешно.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
539
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

define-typography-level имеет следующее определение в исходном коде

изменение кода:

// `font-size`, `line-height`, `font-weight`, `font-family`, and `letter-spacing`.
$my-custom-typography-config: mat.define-typography-config(
  $caption:
    mat.define-typography-level(
      $font-size: 24px,
      $line-height: 24px,
      $font-weight: 400,
      $font-family: Helvetica,
      $letter-spacing: normal,
    ),
);

@include mat.tooltip-typography($my-custom-typography-config);

typography.md

## Typography levels

A **typography level** is a collection of typographic styles that corresponds to a specific
part of an application's structure, such as a header. Each level includes styles for font family,
font weight, font size, and letter spacing. Angular Material uses the [typography levels
from the 2018 version of the Material Design specification][2018-typography], outlined in the
table below.

| Name            | Description                                                  |
|-----------------|--------------------------------------------------------------|
| `headline-1`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-2`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-3`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-4`     | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-5`     | Section heading corresponding to the `<h1>` tag.             |
| `headline-6`     | Section heading corresponding to the `<h2>` tag.             |
| `subtitle-1`     | Section heading corresponding to the `<h3>` tag.             |
| `subtitle-2`     | Section heading corresponding to the `<h4>` tag.             |
| `body-1`         | Base body text.                                              |
| `body-2`         | Secondary body text.                                         |
| `caption`        | Smaller body and hint text.                                  |
| `button`         | Buttons and anchors.                                         |

[2018-typography]: https://m2.material.io/design/typography/the-type-system.html#type-scale

### Define a level

You can define a typography level with the `define-typography-level` Sass function. This function
accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and
`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below.

```scss
@use '@angular/material' as mat;

$my-custom-level: mat.define-typography-level(
  $font-family: Roboto,
  $font-weight: 400,
  $font-size: 1rem,
  $line-height: 1,
  $letter-spacing: normal,
);
```

Демо-версия Stackblitz

Спасибо!! Есть ли способ добавить определения к исходной функции Материала за пределами их файла CSS? Я имею в виду, каким-то образом через код моего приложения, чтобы быть уверенным, что он все еще там, когда файлы материалов обновляются или изменяются по какой-либо причине.

TheCuBeMan 09.04.2024 15:52

@TheCuBeMan Не рекомендуется изменять исходный код, поскольку он исчезнет при обновлении, лучше использовать ту же функцию и попытаться добиться с ее помощью того, что вам нужно.

Naren Murali 09.04.2024 15:56

Я имею в виду, что не хочу менять исходный код именно по этой причине. Я спрашиваю, есть ли способ манипулировать этим кодом «извне», с помощью кода из моих собственных файлов CSS.

TheCuBeMan 09.04.2024 16:20

@TheCuBeMan Я не уверен, зависит от требований, возможно, задам новый вопрос, кто-то может знать, я не в курсе, извините :(

Naren Murali 09.04.2024 16:21
$custom-typography: mat.define-typography-config(
  $caption: mat.define-typography-level(16px, 1.5, 400) 
);

@include mat.tooltip-typography($custom-typography);

::ng-deep .mat-tooltip {
  max-width: 200px; 
  line-height: 1.5; 
  background-color: #333;
  color: #fff;
  border-radius: 4px; 
  padding: 8px; 
}

Другие вопросы по теме