Question

我是Angular的新手，我什至不知道这种方法是否不错。我想创建自己的通用按钮组件，并在button.component.css中定义其样式。之后，我想在其他组件（如登录表单）中使用此按钮。

我在button.component.css中做了类似的事情：

button {
  height: 50px;
  width: 100px;
  border-radius: 8px;
  font-family: "Arial Black";
  font-size: 18px;
  box-shadow: none;
}

.primary-button {
  background: #5c52ff;
  color: white;
}

.primary-button:hover {
  background: white;
  border: #5c52ff solid 2px;
  color: #5c52ff;
}

.secondary-button {
  border: forestgreen solid 2px;
  background: white;
  color: forestgreen;
}

现在在index.html中，我这样做：

<app-button class="primary-button"></app-button>

但是button.component.css的范围仅在button.component.html中起作用

我应该在全局style.css中创建此样式类，而不是创建按钮组件，而是简单地使用按钮标记，并从style.css中添加具有属性的类属性。如何解决这个问题。

Answer 1

您应该将类设置为button.component.html中存在的按钮，而不是在app-button元素中进行设置。您可以通过将类作为Input发送到按钮组件来实现。

index.html

<app-button className="primary-button"></app-button>

button.component.ts

import { Component, Input } from '@angular/core';
....

  @Input() className: string;

button.component.html

<button [class]="className"></button>

这样，您的课程将在button.component.css的范围内应用。

创建自己的按钮组件（主按钮，辅助按钮等）的好方法

1 个答案: