我们可以用自定义的css覆盖选择器的默认样式吗？

Question

我为一个控件（按钮）设置了默认样式，选择器是app-button，btn在button.css中。

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

按钮.css

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

在其他应用程序中，我使用这个按钮，并在sample.css中自定义了样式，不想使用默认类btn。

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

示例.css

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

我试过用输入装饰器，@Input() Class: string。

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

如果我在button.css里有Newbtn类，它就会采用，但我不想这样做。

如果我不提供任何样式，它就会选择btn样式，这在我的情况下是正确的。但我也应该能够用sample.css中的新样式覆盖button.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 类是全局性的，你可以在 styles.css 中声明它。你可以在 styles.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() name: string; @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; 
}