Блог

Главная - Вопросы по программированию - Установка цвета в качестве основного для mat-radio-group в CSS

Установка цвета в качестве основного для mat-radio-group в CSS

#angular #angular-material

#angular #angular-материал

Вопрос:

Следующее устанавливает цвет mat-radio-group на основной.

     <mat-radio-group color="primary">

Однако я не смог найти способ перенести часть ‘color = primary’ в CSS. Следующий код в CSS не дает желаемого результата. Как я должен это делать?

     mat-radio-group {
      color: primary;
      }

Комментарии:

1. Компоненты материала уже используют цвета из вашей темы. Таким образом, вы просто переопределяете цвета своей темы. И это повлияет на все ваши компоненты. Вам не обязательно делать это в каждом компоненте.

Ответ №1:

 // You can provide Custom Theming for Angular Material
// import angular material
@import "~@angular/material/theming";

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// Available color palettes: https://material.io/design/color/
$app-ui-primary: mat-palette($mat-indigo);  // you can change mat-colors based on requirement
$app-ui-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-ui-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-ui-theme: mat-light-theme(
  $app-ui-primary,
  $app-ui-accent,
  $app-ui-warn
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-ui-theme);

Добавьте это в свой styles.scss и измените $app-ui-primary цвет на другой цвет $mat-pink или другой цвет палитры материалов. Это изменит цвет для color="primary" определенных тегов