Question

在我的有角度的应用程序中，我在不同组件中有几个工具栏，并且该工具栏上的按钮也很少。为了给这些按钮设置样式，我在style.css内编写了CSS规则，以避免重复。

现在，在组件之一中，我也在工具栏中添加了mat-button-toggle-group。当mat-button-toggle元素生成一个button元素时，style.css中的样式也将应用于其上。因此，为了覆盖切换组按钮，我在组件样式表中编写了CSS。但不幸的是，这种风格并未得到应用。

简化的HTML版本可以是：

<mat-toolbar>
  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
    <mat-button-toggle buttonId="b1" value="1">1</mat-button-toggle>
    <mat-button-toggle value="2">2</mat-button-toggle>
    <mat-button-toggle value="3">3</mat-button-toggle>
  </mat-button-toggle-group>

  <button mat-raised-button color="primary">Primary</button>
</mat-toolbar>

在style.css中，我有：

.mat-toolbar button {
  margin-left: 10px;
}

在组件的CSS中，我尝试过：

.mat-button-toggle-button, 
#b1,
mat-button-toggle button,
.mat-button-toggle button {
  margin-left: 0;
}

我尝试了各种选择器来选择基础按钮，但到目前为止没有成功。复制的问题可以在这里找到：https://stackblitz.com/edit/angular-1oe6ki

任何想法，我该怎么做？一种方法是将style.css的CSS规则写入每个组件的CSS中（并且可以这样工作），但我想尽可能避免重复。

样式垫-按钮-切换的基础按钮

0 个答案: