Styles in app.component.scss not been applied

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

jarenteria pro asked 5 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 ?

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

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 5 years ago

Thanks Damian, that did it!,

Regards, Jose

Add comment

Write

Create snippet

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

jarenteria

Pro User

84Support score
11Questions 3Answers

0Snippets likes 0Snippets