选择片刻后，mat-tab标签会移动。如何解决这个问题

Question

.mat-tab-group {
  margin: 10px;
}

.mat-tab-label-active {
  width: 50px;
  background: silver;
  color: darkblue;
  font-weight: bold;
  border-top-right-radius: 5px;
  margin-left: 10px;
  margin-right: 10px;
  opacity: 1 !important;
  text-align: center;
  animation: none;
}

.mat-tab-label {
  text-align: center;
  width: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background: silver;
  color: darkblue;
  font-weight: bold;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

我正在尝试将文本宽度设置为50px（有效和无效），但标签是否还在移动？

Answer 1

只需在您的src/styles.css文件中添加以下行：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';