мы можем переопределить стили селектора по умолчанию с пользовательскими css в angular

Question

У меня установлены стили по умолчанию для элемента управления (кнопка), селектор - кнопка приложения, btn in button. css

<button class="btn">{{SampleText}}</button>

. css

.btn { 
font-size: 20px;
font-family: Calibri;
background-color: white;}

В другом приложении я использую эту кнопку с настроенным стилем в образце. css, не хочу иметь класс по умолчанию btn.

<app-button class="Newbtn" >Hello</app-button>

образец. css

.btn { 
font-size: 25px;
font-family: Calibri;
background-color: Red;}

Я пытался использовать декоратор ввода, @Input () Класс: строка;

<button [ngClass]="'btn'">{{SampleText}}</button>
<app-button [Class]="'Newbtn'" >Hello</app-button>

это не принимает стили Newbtn, объявленные в примере. css. если у меня есть класс Newbtn внутри кнопки. css это займет, но я не хочу этого делать.

, если я не даю никаких стилей, он выбирает стили btn, что правильно в моем случае , но я также должен иметь возможность переопределить стили по умолчанию, упомянутые в кнопке. css новыми стилями в образце. css.

Пожалуйста, предложите мне, если я хочу настроить стили по умолчанию, как я могу сделать это ?

Answer 1

Ваш AppButtonComponent должен быть таким:

@Component({
  selector: 'app-button',
  template: `
    <button [class]="Class ? Class : 'btn'">
      <ng-content></ng-content>
    </button>
  `
})
export class AppButonComponent {
  @Input() Class: string;
}

И вы можете использовать его следующим образом:

<app-button>Original Button</app-button>

<app-button Class="custom-css">Custom Button</app-button>

Здесь важно то, что класс custom-css является глобальным , Вы можете объявить это внутри стилей. css.

Возможно, у вас есть свои css файлы (предположим, default-styles.css), и вы хотите создать другой файл, содержащий ваши пользовательские стили (предположим, custom-styles.css). Вы должны объявить о существовании обоих файлов внутри angular.json, как братья и сестры styles.css в массиве стилей:

"styles": [
  "src/styles.css",
  "src/default-styles.css",
  "src/custom-styles.css"
],

Вы можете увидеть пример этой демонстрации Stackblitz .

Answer 2

Пример: - Родительский компонент. HTML

 <hello name="{{ name }}" [cssClassName]="'btn-green-class'"></hello>

Дочерний компонент. HTML

  <button class="button {{cssClassName}}">Green</button><br/>
<button [ngClass]="['button', cssClassName]">Another button</button>

Дочерний компонент. TS файл @Input () имя: строка; @Input () cssClassName: string = "button-background-yellow";

Стиль. css

   .btn-green-class{
background-color: #4CAF50;
}

.button { border: none;
  color: black;
  margin: 10px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button-background-yellow{
    background-color: yellow; 
}