Styles in app.component.scss not been applied


Topic: Styles in app.component.scss not been applied

jarenteria pro asked 3 years ago

I need to style a single mdb-select with its active label to green. Adding the following style to the component.scss file where this mdb-select lives does not change the mdb-select label to green:

app.component.scss:

.rooms mdb-select label.active {
  color: green !important;
}

app.component.html:

<div class="md-form **rooms**">
        <mdb-select
          [outline]="true"
          [options]="roomOptions"
          [(ngModel)]="selectedRoomIndex"
          label="Habitaci&oacute;n"
          (ngModelChange)="selectRoom($event)">
        </mdb-select>
      </div>

if I move the style to the global styles file (styles.scss) then the mdb-select will have label green.

Am I doing something wrong ?


Damian Gemza staff answered 3 years ago

Dear @jarenteria

Please use the ::ng-deep pseudo-selector at the top of your styles:

::ng-deep {
  mdb-select.rooms label.active {
    color: green !important;
  }
}

Best Regards,

Damian


jarenteria pro commented 3 years ago

Thanks Damian, that did it!,

Regards, Jose


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: macOS Mojave
  • Provided sample code: No
  • Provided link: No