Styling in .scss isn't taking effect for .xng-breadcrumb-trail color

[chmorgan]

🐞 Bug report

Trying to use:

::ng-deep .xng-breadcrumb-trail {
color: white;
background-color: red;
}

in my app.component.scss file

to change the trail text to be white.

Description

Background color goes red but text color is stuck black.

🔬 Minimal Reproduction

💻Your Environment

Angular Version:
11.2.2

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.1
Node: 12.18.2
OS: linux x64

Angular: 11.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.1
@angular-devkit/build-angular   0.1102.1
@angular-devkit/core            11.2.1
@angular-devkit/schematics      11.2.1
@angular/cdk                    11.2.1
@angular/cli                    11.2.1
@angular/material               11.2.1
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript                      4.1.5


## 🔥 Exception or Error

[chmorgan]

It also seems to not take effect with ::ng-deep .xng-breadcrumb-root or item when I'm at the top level page.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[udayvunnam]

Not stale

[udayvunnam]

@chmorgan can you try styling this way. Try giving it's parent a class name which increases CSS specificity -

xng-breadcrumb/apps/breadcrumb-demo/src/styles.scss

Line 61 in 0e15963

.myapp-breadcrumb .xng-breadcrumb-trail {

[udayvunnam]

Here's is the documentation for customizing styles https://github.com/udayvunnam/xng-breadcrumb/blob/main/docs/advanced-patterns.md#custom-breadcrumb-styles