12

I have a component, when I add the css code to the .css file of that component, it works. But if I move the code to style.css, it's not working.

My html

<div class="content-body mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="transKey">
      <mat-header-cell *matHeaderCellDef mat-sort-header> trans no </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <a (click)="showDetail(row.url, row.transKey)" >
            {{row.transKey}}
        </a>
        </mat-cell>
    </ng-container>
  </mat-table>
</div>

My CSS

.content-body a {
  cursor: pointer;
  text-decoration: none;
  color:  #4c90c7
}

.content-body a:hover {
  color: #346092;
}

.content-body a:visited {
  text-decoration: none;
  color: #4c90c7
}

However, not all components are not working, below is my file structure. Style.css works on 'dashboard' html, but not 'trans-msg-his-dialog' html. I'm wondering why, if it has something to do with the module.ts of trans-msg.

Can anyone help? Thank you.

File structure :

enter image description here

UPDATE Following StepUp's comment, I checked Chrome Inspector and found following:

'dashboard' which works:

enter image description here

'trans-msg-his-dialog' which is not working:

enter image description here

However, I'm not sure what the first section is, I can't find them in my css. I'm wondering if it has something to do with Bootstrap?

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;

}

UPDATE2 Computed style is like following, however I can't find 'rgba(0, 0, 0, 0.87)' in any of my css. I also tried to move those a-related css to the bottome of style.css, but no luck. enter image description here

dmd
  • 337
  • 1
  • 4
  • 17
  • 2
    If you have to override a style, add `!important` at the end of the single style. IE: `color: red !important;` – Jacopo Sciampi Apr 16 '19 at 07:39
  • @JacopoSciampi Thank you, I add !important and it does work! However I'm wondering why the style.css does apply to one component but not the other. – dmd Apr 16 '19 at 07:56
  • Here you can find the answer: https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css -> Basically the styles defined in `style.css` get applied after the `trans-msg-his-dialog.css`. The `!important!` key -says- to accept it as the value, ignoring all the other rules defined for that class or id – Jacopo Sciampi Apr 16 '19 at 08:30
  • @JacopoSciampi I see. Got it, thank you! – dmd Apr 16 '19 at 08:46

2 Answers2

6

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied. Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule. Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

  1. You can see which properties won by clicking Computed style tab: enter image description here

  2. Or try to move these styles to the bottom of style.css file:

    .content-body a {
    cursor: pointer;
    text-decoration: none;
    color:  #4c90c7
}

.content-body a:hover {
    color: #346092;
}

.content-body a:visited {
    text-decoration: none;
    color: #4c90c7
}

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

<a href="javascript:;">Button</a>
StepUp
  • 36,391
  • 15
  • 88
  • 148
  • Thank you for reply! However there is no duplicate declare in both styles.css and component.css. My component.css does declare one set of css code, but this code doesn't declared in style.css. – dmd Apr 16 '19 at 09:51
  • @chloe could you show your component styles where you've used `!important` keyword? – StepUp Apr 16 '19 at 10:02
  • @chloe see to what properties you've applied `!important` and delete these style properties from the `your.component.css` – StepUp Apr 16 '19 at 11:07
  • My component css only has one code which is ".mat-column-transKey {flex: 0 0 150px;}", the css I need is 'a'-related, and they're only in styles.css, not in my.component.css. – dmd Apr 16 '19 at 11:22
  • @chloe it means that your style is overridden by another style in your global `styles.css`. Try to use Google Chrome Inspector which style overrides your style properties – StepUp Apr 16 '19 at 11:25
  • Hi! I checked Chrome Inspector and updated my post with images, thank you! – dmd Apr 17 '19 at 02:32
  • I tried to move those styles to the bottom of style.css but no working, I also checked computed, but not sure how to fix the problem according to the computed style. I updated my question with image, thank you! – dmd Apr 18 '19 at 02:55
  • @chloe I am glad that it helped to you! – StepUp Apr 18 '19 at 08:11
0

enter image description here

In case anyone encounters this problem in the future, (link is angular.json file). I have seen that several people say just use !important, but !important can come with bugs. So, I figured this out on my own and decided to reorder the styles in the angular.json file. This put precedence on styles.css over bootstrap. It worked well for me! SIDENOTE: Also, if you are using bootstrap, realize that bootstrap classes come with some styling already, so that may be why you are encountering problems as well. You are using styles.css but bootstrap class still have the styles on them.

Antonio
  • 1
  • 1