Html 使用mat按钮以角度构建导航栏

我正在构建一个angular应用程序。作为其中的一部分，我正在开发一个使用mat按钮的导航栏

<div flexLayout="row">
  <button class="flat_button" mat-flat-button>B2-L1</button>
  <button mat-flat-button>B2-L3</button>
  <button mat-flat-button>B2-L3</button>
  <button mat-flat-button>B2-L4</button>
</div>         

---

我已经更改了按钮的背景色，现在如果我选择一个按钮，我希望它的颜色是白色的（无论我选择/单击哪个按钮，它都应该是白色的，其余的应该是灰色的）。我试过几件事，但都做不到。有人能帮我吗？谢谢。

按钮上有几个事件，您可以在其中更改颜色

• ：单击后焦点将更改颜色

• ：活动的

  将在单击时更改颜色

• ：悬停在按钮上时，悬停将更改颜色

我想你在这里寻找的是

：focus

.mat-flat-button:focus {
    background-color: white !important;
}

---

您可以找到一个演示。

按钮上有几个事件，您可以在其中更改颜色

• ：单击后焦点将更改颜色

• ：活动的

  将在单击时更改颜色

• ：悬停在按钮上时，悬停将更改颜色

我想你在这里寻找的是

：focus

.mat-flat-button:focus {
    background-color: white !important;
}

---

您可以找到一个演示。

您必须设置一个变量，比如

上的
selectedTab
单击
mat平面按钮的
，然后使用
ngClass
根据
selectedTab
添加
活动的
类


B2-L1
B2-L3
B2-L3
B2-L4

其中，
active
类的外观如下所示

.mat-flat-button.active{
背景色：白色；
}

注意：我不确定这是否是您的代码中的输入错误，但
0
和
px
之间应该没有空格。如果这样使用，它将不适用。
！重要信息
也不需要。相反，你可以试试这个

.mat扁平按钮{
背景颜色：灰色；
边界半径：0px；
}
您必须设置一个变量，如
上的
selectedTab
，单击
mat平面按钮的
，然后使用
ngClass
根据
selectedTab
添加
活动的
类


B2-L1
B2-L3
B2-L3
B2-L4

其中，
active
类的外观如下所示

.mat-flat-button.active{
背景色：白色；
}

注意：我不确定这是否是您的代码中的输入错误，但
0
和
px
之间应该没有空格。如果这样使用，它将不适用。
！重要信息
也不需要。相反，你可以试试这个

.mat扁平按钮{
背景颜色：灰色；
边界半径：0px；
}
你能在stackblitz中提供最低限度的工作演示吗？当你说
选择一个按钮时，你的意思是
单击/悬停一个按钮
？选择一个按钮你能在stackblitz中提供最低限度的工作演示吗？当你说
选择一个按钮时，您的意思是
单击/悬停按钮
？选择一个按钮这只会部分起作用，如果用户在外部单击，他仍然希望选项卡显示为活动状态。但是，由于您使用的是
focus
事件，该按钮将再次失去其活动状态。这只会部分起作用，如果用户单击外部，他仍希望选项卡显示为活动状态。但是，由于您使用的是
focus
事件，该按钮将再次失去其活动状态。