Angular语言 - 全局样式 css 和组件 css

Question

在一个 Angular 项目中，我希望有许多具有定义样式的表。因此，对于组件中的每个表，我需要为表样式编写 css。

以这个StackBlitz为例：堆栈闪电战

如您所见，我有一个带有黑色边框的主表和一个带有红色边框的代理表，它们位于两个单独的组件中。我希望我的主表保持黑色，但代理表以及我将在其他组件中创建的所有新表都有绿色边框。

所以我的问题是，如果我想对表使用特定样式并对其他表使用"全局"样式，我需要做什么？

更新：这如何与按钮一起使用？

Answer 1

可以将所需的任何全局样式放在src文件夹的styles.css文件中。这些样式对于应用程序中的每个模板都是全局的。

然后将任何组件的唯一样式放在与组件相同的文件夹中的 css 文件中，并在@Component装饰器中引用它。

@Component({
  selector: 'pm-star',
  templateUrl: './star.component.html',
  styleUrls: ['./star.component.css']
}) 

封装@Component装饰器中定义的样式，以便与组件一起使用。

Answer 2

假设您有两个css文件，一个用于全局，另一个用于特定组件，并且您只想设置按钮或表格等样式。

全球.css

.styledbutton { background-color : Red }

组件.css

.styledbutton { background-color : green !important }

将全局 css 文件链接到所有组件和组件中的特定 css，例如

@Component({
   selector: 'component',
   templateUrl: 'component.html',
   styleUrls: ['global.css', 'component.css']
})

如果从组件中删除所有 css.css该按钮将获取全局.css如果没有，它将采用覆盖的 css

希望这有帮助

Answer 3

例如，

在设置button样式时，如果您想在整个页面或站点中使用常规样式，请使用类，而不是设置 HTML 元素的样式。否则，只要您不想使用这些样式，就必须随时覆盖它们。这样，您可以轻松地扩展样式，以便按钮可以继承样式并进行更改。请注意.button-extended如何继承.button :hover样式。通过设置类而不是元素的样式，您可以自由地在任何 HTML 元素上使用它，而不是局限于一个。我还建议你考虑学习 SASS（SCSS）。这是 HTML 和 CSS 的示例：

.button
{
    display: inline-block;
    width: auto;
    background: #000;
    color: #fff;
    border: solid #39f;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button:hover
    {
        background: #fff;
        color: #000;
    }
.button-specific
{
    display: inline-block;
    background: #fff;
    color: #000;
    border: solid;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button-specific:hover
    {
        color: #39f;
        background: #000;
    }
.button-extended
{
    display: block;
    border: solid #ff0000;
    text-transform: uppercase;
    padding: 2em;
    background: #ccc;
}

<a href="#" class="button">.button</a>
<br>
<a href="#" class="button-specific">.button-specific</a>
<br>
<a href="#" class="button button-extended">.button, .button-extended</a>