Angular-全局样式CSS和组件CSS

Question

In an Angular project I want to have many tables with a defined style. So for each table in the components I need to write the css for the table styling.

Take this StackBlitz example: StackBlitz

As you can see I have master table with black border, and an agent table with red border, and they are in two separate components. I want that my master table continue black, but the agent table, and all new table I will create latter on in other components had for example an green border.

So my question is, what I need to do if I want use a specific style for a table and use the "global" style for other tables?

Update: how this works also with buttons?

Answer 1

For example when styling a button , if you have a general style you would like to use across the page or the site, use a class, rather than styling the HTML element. Else you'll have to override those styles any time you don't want to use them. This way you can easily extend your styles so that a button can inherit the styles and have changes. Notice how .button-extended inherits the :hover styles from .button . By styling the class rather than the element, you are free to use it on any HTML element, rather than being restricted to one. I also recommend you look into learning SASS (SCSS). This is an example of the HTML and 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

You can put any global styles that you want in the styles.css file in your src folder. These styles are global to every template in your application.

Then put any component unique styles in a css file in the same folder as the component and reference it in the @Component decorator.

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

Styles defined in the @Component decorator are encapsulate for use with the component.

Answer 3

Let's say you have two css file, one for global and the other one for the specific component and you just want to style a button or a table etc..

global.css

.styledbutton { background-color : Red }

component.css

.styledbutton { background-color : green !important }

Link the global css file to all of your component and the specific css together in the component like

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

If you delete all the css from the component.css the button will get the global.css and if not it will take overriden css

Hope this helps