我有一个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);

但这只是字体大小和重量.我也想定制行高,工具提示的宽度等等.

我可以用这个代码来做吗?如果是这样,我还可以为这些目标设置哪些选项?

我应该提到的是,我已经try 了各种CSS Select 器,这些 Select 器应该覆盖material 的默认值(这显然是最简单和最简单的方法,如果可能的话),但到目前为止没有成功.

推荐答案

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 Demo

Angular相关问答推荐

我使用Ngrx的子集 Select 器不起作用

将kendo—colorpicker的kendo弹出窗口附加到组件''

Angular 和PrimeNg文件Uploader:渲染元件时如何显示选定文件的列表?

MAT表的内联文本编辑-未刷新编辑图标

如何用ANGLE指令覆盖Html元素的数据绑定属性

如何在Angular功能路由保护中取消订阅RxJs主题

如果observableA在1秒前触发,则过滤掉observableB

对象中的值丢失 angular ngrx

大型 Angular 12 应用程序 - 我如何管理 js 文件

Angular 测试被认为是成功的,即使有错误

BehaviorSubject 在 Angular 中制作数据之间的时间表(或计时器)

如果Angular 数据为空,如何设置N/A

如何从表单组中禁用的表单控件中获取值?

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

如何在 Angular CLI 1.1.1 版中将路由模块添加到现有模块?

unexpected token < 错误

Angular 中 polyfills.ts 文件有什么用

找不到模块angular2/core

Angular 2 router.navigate

RxJS:takeUntil() Angular 组件的 ngOnDestroy()