mat-tab-group无法显示默认选中标签的样式

Question

我有三个标签：label1、label2和label3。每个标签内部都有另一组选项卡。默认情况下，label1显示所选样式以及其中的tab1。现在，当我点击其他标签（如label2）时，会加载另一组选项卡，但没有一个选项卡标签高亮显示。label3同理。我必须明确地点击选项卡才能看到样式。

请查看以下问题链接：https://stackblitz.com/edit/angular-tyjslw?file=app/tabs-template-label-example.html

- Aakash Thakur

Answer 1

他们只在焦点上添加css，因此如果您想在活动状态下添加样式，则可以通过以下方式实现：

在组件css中：

.mat-tab-label-active{
  background-color: red;
  opacity: 1;
}

组件侧添加：

encapsulation : ViewEncapsulation.None

WORKING DEMO

- Vivek Doshi

---

当我点击选项卡之一后，再点击内容时，它看起来有点奇怪。它具有正常的背景，但是当我在内容某个地方单击时，它会变成红色。而且当我切换选项卡时，离开的选项卡会在瞬间显示红色背景。有什么解决方法吗？ - Aakash Thakur

现在看起来更好了。你改了什么吗？ - Aakash Thakur

CSS，透明度更改 - Vivek Doshi

好的，我会点赞你的回答，但我还会等待其他人的意见。我的意思是如果有人能想出更好的解决方法。 - Aakash Thakur

Vivek，一个快速的问题。你为什么使用了 ViewEncapsulation？这种样式必须全局可用吗？ - Aakash Thakur

Answer 2

选择选项卡时不仅会进行一些 CSS 更改，还会有一个墨水条移动到所选选项卡。

当我的工具栏在初始化过程中不可见时，我遇到了类似的问题：我在 sidenav 内部放置了一个工具栏，默认情况下它是关闭的，当我打开它时，默认选定的选项卡没有高亮显示。

正确的方法是使用 MatTabGroup 的 realignInkBar() 方法。在你的情况下，当在主 mat-tab-group 上更改选项卡时，应该为正确的 mat-tab-group 元素调用此方法。

- Friedrich