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

Posted 2023-03-06

【中文标题】我们可以用angular中的自定义css覆盖选择器的默认样式吗

【英文标题】：can we override the default styles of selector with custom css in angular

【发布时间】：2020-08-06 12:53:11

【问题描述】：

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

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

button.css

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

在其他应用程序中，我正在使用带有 sample.css 中自定义样式的此按钮，不想使用默认类 btn。

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

sample.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>

这不是采用在 sample.css 中声明的 Newbtn 样式。如果我在 button.css 中有 Newbtn 类，它将需要，但我不想这样做。

如果我不提供任何样式，它会选择 btn 样式，这在我的情况下是正确的。但我也应该能够用 sample.css 中的新样式覆盖 button.css 中提到的默认样式。

如果我想自定义默认样式，请建议我如何制作？

【问题讨论】：

你在用 app-button 组件中的 Class 输入做什么？它是直接绑定到按钮的 ngClass 吗？

是的，这是另一种方式，但我不想在 button.css 中使用任何 css 类，我想使用 sample.css 类。我已经用 css 样式更新了问题。

根据您上面的代码，您可以更改 sample.css 中类的名称并从父组件传递 css 名称。 (父组件) (子组件) 绿色另一个按钮

【参考方案1】：

示例：- 父组件。 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; 
    

【讨论】：

我正在创建可重用的组件并用于其他项目。我公开了相同的模块。组件我不保留 2 个按钮。我只有一个提供默认类的按钮，当我与选择器一起使用时，我会传递自定义的 css 类，或者如果我不传递它应该采用默认的 css 类。你在哪里hv style.css？为什么这里需要名字？

我已经更新了代码，现在你可以根据你的需要重写你的类了。如果您没有通过任何课程，它将采用默认课程，否则它将采用给定的课程。尝试从父组件中删除代码 [cssClassName]="'btn-green-class'"

【参考方案2】：

你的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中声明它。

可能您有自己的 css 文件（假设为 default-styles.css）并且您想要构建另一个包含您的自定义样式的文件（假设为custom-styles.css）。您必须在样式数组中声明 angular.json 中两个文件的存在，作为 styles.css 的兄弟姐妹：

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

您可以在此Stackblitz demo 上查看示例。