Fails to style with styleUrls in Angular component's scss file

Question

I selected the scss option on a new Ionic Angular app. It's html container holds three tab pages. The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't import the container's scss.. The container component implements OnInit.The stylesheets in the 3 tab page components are created empty.

I cannot change the style of any of the 3 tab pages by adding styles to their stylesheets. It continues to use the container's stylesheet. The selector for the style is in the container's html:

explore-container.component.html

<div id="container">
  <strong>{{ name }}</strong>
  ...
</div>

The explore-container.component.ts file:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
  @Input() name: string;

  constructor() { }

  ngOnInit() {}

}

The tab page html uses the selector for the container component:

tab1.page.html

...

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

The tab1.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor() {}

}

I have reviewed the docs about external stylesheets and encapsulation but I'm still lost. Why can't I just add a style to the scss in the tab page's own presently empty scss file? Eg., why doesn't inserting styles into the page component's scss:

tab1.page.scss

 #container strong {
 font-size: 40px;

}

override this in the explore-container.component.scss?

 #container strong {
 font-size: 20px;

}

Am I missing an import somewhere? If so, where?