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

我为一个控件(按钮)设置了默认样式,选择器是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中提到的默认样式。

请建议我,如果我想自定义默认样式,我该怎么做?

解决方案:

你的 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演示.

给TA打赏
共{{data.count}}人
人已打赏
解决方案

有没有办法在Lua中从一个变量中运行代码?

2022-5-12 4:00:25

解决方案

如何使用json路径删除提取的json中的[]字符?

2022-5-12 5:00:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索