Question

我不知道如何在项目中使用一些通用CSS。我想要的是所有组件的css文件都一样，因此，如果我更改表格颜色，它将在所有有表格的组件中更改它，但是如果我有针对该组件的特定css文件，则不会更改。例如，我有以下stackBlitz代码：

如您所见，我有一个带黑色边框的主表，一个带红色边框的代理表，女巫代理和主表是2个单独的组件。例如，我希望主表继续为黑色，但是代理表以及我将在其他组件中创建的所有新表都具有绿色边框。

我该怎么做？

PS：因此，如果我想做我想做的事情，例如，我将仅更改一个css文件来更改应用程序中按钮的所有颜色，并且如果我想要特定的按钮颜色，则将更改组件css。

Answer 1

例如，在对button进行样式设置时，如果您希望在整个页面或网站上使用一般样式，请使用类，而不是对HTML元素进行样式设置。否则，您在不想使用任何样式时都必须覆盖它们。这样，您可以轻松扩展样式，以便按钮可以继承样式并进行更改。注意.button-extended如何从:hover继承.button样式。通过设置类而不是元素的样式，您可以在任何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>

Answer 2

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

然后将所有组件的唯一样式放入与该组件相同的文件夹中的css文件中，并在@Component装饰器中对其进行引用。

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

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

Answer 3

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

global.css

.styledbutton { background-color : Red }

component.css

.styledbutton { background-color : green !important }

将全局css文件链接到所有组件以及组件中的特定css在一起，例如

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

如果从component.css中删除所有css，则该按钮将获得global.css，否则，该按钮将使用覆盖的css

希望这会有所帮助

通用CSS和特定CSS

3 个答案: