Angular прозрачность компонента больше не работает при использовании Bootstrap

Question

В моем приложении Angular у меня есть два компонента, A и B, первый - кнопка переключения, а второй - форма. Компонент B подписывается на состояние компонента A, используя сервис, чтобы установить его CSS в соответствии с наблюдаемым состоянием переключения. Например, если компонент A установлен в состояние «leftPressed», компонент B реагирует на это состояние, устанавливая свой собственный CSS для «enable» (через [ngStyle]), чтобы сделать форму доступной для пользователя, вместо этого если компонент A установлен в состояние «rightPressed», компонент B устанавливает для своего собственного CSS значение «disable». Это код стиля отключения CSS:

.disable {
  opacity: 30%;
  pointer-events: none;
} 

Эта стратегия приведет к потемнению формы и сделает ее недоступной для пользователя. Моя проблема в том, что эта штука работала, пока я не представил в своем проекте Bootstrap, чтобы сделать мое приложение более отзывчивым (я только что поместил эти две кнопки в схему div-row-col в соответствии с Bootstrap modus operandi), но странно то, что только непрозрачность не работает на компоненте B, но «событие мыши: ни один» не сработало, как ожидалось.

Как может быть возможно, что CSS, в этом случае, ценится частично? Единственное, что я знаю, это то, что, если я откатлю эти компоненты в моем предыдущем HTML без Bootstrap кода, все будет работать нормально.

Обновление с большим количеством кода:

Это код моего HTML компонента, в котором объявлено больше компонентов

<!--This is the bar without Bootstrap that works-->
<div class="searchBar">
  <app-button-search-city-polygon-component></app-button-search-city-polygon-component>
  <app-search-city-bar [ngClass]="[cityBarStyle]"></app-search-city-bar>
  <app-clear-polygon-bar [ngClass]="[polygonBarStyle]"></app-clear-polygon-bar>
  <app-button-search-centers-or-operators></app-button-search-centers-or-operators>
  <app-validate-and-search-button></app-validate-and-search-button>
</div>

<!--This is the bar developed using Bootstrap and the CSS opacity DOES NOT WORK on the component 'app-search-city-bar'-->
<div class="searchBar row align-content-lg-center">

  <div class="col-lg-1">

  </div>

  <div class="col-lg-2">
    <app-button-search-city-polygon-component></app-button-search-city-polygon-component>
  </div>

  <div class="col-lg-4">
    <app-search-city-bar [ngClass]="[cityBarStyle]"></app-search-city-bar>
  </div>

  <div class="col-lg-1">
    <app-clear-polygon-bar [ngClass]="[polygonBarStyle]"></app-clear-polygon-bar>
  </div>

  <div class="col-lg-2">
    <app-button-search-centers-or-operators></app-button-search-centers-or-operators>
  </div>

  <div class="col-lg-1">
    <app-validate-and-search-button></app-validate-and-search-button>
  </div>

  <div class="col-lg-1">

  </div>

</div>

Это CSS этого компонента:

.searchBar {
  background-color: #eeeeee;
  padding-top: 15px;
  display: flex;
  justify-content: center;
}

.cityBarDisabled {
  opacity: 30%;
  pointer-events: none;
}

.polygonBarDisabled {
  opacity: 30%;
  pointer-events: none;
}

.cityBarEnabled {

}

.polygonBarEnabled {

}

Это код TS:

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {ToggleCityPolygonService} from '../../_service/toggleCityPolygonService/toggle-city-polygon.service';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent implements OnInit {

  state = '';

  cityBarStyle = '';
  polygonBarStyle: '';

  constructor(private toggleCityPolygonService: ToggleCityPolygonService) {

  }

  ngOnInit(): void {
    this.toggleCityPolygonService.getCityPolygonStateObs().subscribe(v => {this.state = v[''];
    // console.log('i\'m gettin value: ' + v);
    if (v === 'searchByCity') {
      // @ts-ignore
      this.polygonBarStyle = 'polygonBarDisabled';
      this.cityBarStyle = 'cityBarEnabled';
    } else {
      if (v === 'searchByPolygon'){
        this.cityBarStyle = 'cityBarDisabled';
        // @ts-ignore
        this.polygonBarStyle = 'polygonBarEnabled';
      }
    }
    })
  }

}

'toggleCityPolygonService' - это сервис, который содержит 'cityPolygonState', который изменяется между двумя значениями, когда пользователь нажимает на относительную кнопку переключения, которая может принимать только два состояния: 'searchByCity' и 'searchByPolygon'

Answer 1

Непрозрачность принимает значение 0,1 - 1. Попробуйте изменить непрозрачность: 30% до непрозрачности: 0,3; https://www.w3schools.com/css/css_image_transparency.asp