Identical CSS rules look different in Angular-CodePudding

I'm rewriting a page in Angular. I copied all the styles and layout. But colors are not applied properly. After inspecting original and new pages I don't see why they are different. I think it is either CSS specificity or Angular style encapsulation. Can you please help?

Here are my styles, I copied them one to one:

.table-main {
    display: flex;
    flex-direction: column;
    margin-right: -1px;
    overflow-x: scroll;
    overflow-y: hidden;

    .main-head {
        display: flex;

        .head-inner {
            display: flex;
            flex-direction: column;
        }

        .table-col {
            background-color: white;
            cursor: pointer;
        }
    }

    .table-col {
        height: 45px;
        padding: 0 5px;
        border-bottom: 1px solid gainsboro;

        &.locked {
            background-color: darkkhaki;
        }
    }

CodePudding user response：

there are 2 things that can affect styles in angular 1 - component tags are present in the resulting html, thus selectors containing > like .parent > .child could break. 2 - style incapsulation - most likely this one is the reason of your troubles. - all of the css selectors become more complex (some attributes are added to every selector) and because of this, css doesn't affect any elements that aren't part of the components template.

The thing one your screens happends because of these huge selectors are of increased specificity and color #fff became stronger because of that.

I would suggest 2 options

1 - remove styles encapsulation

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

or 2 - make styles selectors simpler and more linear

.table-main {
    display: flex;
    flex-direction: column;
    margin-right: -1px;
    overflow-x: scroll;
    overflow-y: hidden;
}
 .table-col {
     height: 45px;
     padding: 0 5px;
     border-bottom: 1px solid gainsboro;

     &.locked {
       background-color: darkkhaki;
     }
}

with this approach selectors won't grow in size that much. some changes would still be required because of how your css is structured, but far less than with your current situation