Стильная матовая кнопка-кнопка-переключатель - PullRequest
Новая
       15

Стильная матовая кнопка-кнопка-переключатель

0 голосов
/ 14 июня 2019

В моем угловом приложении у меня есть несколько панелей инструментов в разных компонентах и ​​несколько кнопок на этой панели инструментов. Чтобы стилизовать эти кнопки, я написал правила CSS внутри style.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

Есть идеи, как мне это сделать? Один из способов - записать правила CSS style.css в CSS каждого компонента (и он работает таким образом), но я хотел бы избежать повторения, если это возможно.

...