Можно ли переопределить стили MatButtonToggleGroup по умолчанию? Как изменить радиус границы и цвет фона MatButtonToggleGroup?
Вы можете перезаписать для него переменные, например, в основном файле Styles.scss.
Чтобы изменить border-radius
, есть переменная --mat-standard-button-toggle-shape
, поэтому просто установите --mat-standard-button-toggle-shape: 1px;
, например.
Чтобы изменить background-color
невыбранного mat-button-toggle
, есть переменная --mat-standard-button-toggle-background-color
, а для выбранного mat-button-toggle
есть переменная --mat-standard-button-toggle-selected-state-background-color
.
Пример:
Это изменит радиус границы на 5 пикселей, но лучше изменить переменную на 5 пикселей, например, в Styles.scss сделайте mat-button-toggle-group {--mat-standard-button-toggle-shape: 5px;}
. Материал предоставляет эту переменную, чтобы их было легче настроить.
.mat-button-toggle-group-appearance-standard { border-radius: 5px; }