Angular (18) Material Tooltip - 如何添加/自定义边框？

Question

截至此问题发布，我正在使用最新版本的 Angular 和 Material。

我已经设法更改工具提示的背景和文本颜色，覆盖这些变量：

--mdc-plain-tooltip-container-color: white !important;
//--mdc-plain-tooltip-container-border: 1px solid blue !important;
--mdc-plain-tooltip-supporting-text-color: var(--logo-blue) !important;

（注释行试图遵循相同的逻辑，但没有运气）

但未能找到一种方法来对其应用简单的边框。

我什至进入了 Material 库的源文件，但没有在任何地方找到任何 CSS。

不幸的是，我什至无法检查 DOM 中的元素以获取此工具提示，因为当我将鼠标悬停在其上方时，它会消失。

希望了解一种将边框添加到材质工具提示元素的方法...

Answer 1

没有用于设置边框的

css variable

，因为边框样式不存在。我只能看到 border-radius 属性 CSS 变量。

所以你必须手动定义 CSS，如下所示。

.mat-mdc-tooltip-surface {
  --mdc-plain-tooltip-container-color: white !important;
  //--mdc-plain-tooltip-container-border: 1px solid blue !important;
  --mdc-plain-tooltip-supporting-text-color: var(--logo-blue) !important;
  border: 1px solid black;
}

Stackblitz 演示