Angular嵌套组件样式未生效：横向滚动条无法渲染问题

问题场景 #

在Angular项目里，直接在模态框内的容器中放置宽表格时，横向滚动条可以正常渲染：

my-component.html #

<!-- Test Modal -->
<div class="modal fade modalsize" data-backdrop="false" id="testModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h4>Test</h4>
        <div id="wrapper">
        <table>
          <tr>
            <th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th>
            <th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th><th>Company</th>
          </tr>
        </table>
       </div>
      </div>
    </div>
  </div>
</div>

my-component.css #

#wrapper {
  overflow-x: scroll;
}

但将表格封装到my-second-component子组件，再嵌套进模态框后，子组件的横向滚动样式完全不生效：

修改后的my-component.html #

<div class="modal fade modalsize" data-backdrop="false" id="testModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <my-second-component (valueSelected)='selectValue($event)'></my-second-component>
      </div>
    </div>
  </div>
</div>

my-second-component.html #

<div id="mywrapper">
  <table>
    <tr>
      <th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th>
      <th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th><th>Component</th>
    </tr>
  </table>
</div>

my-second-component.css #

#mywrapper {
    overflow-x: scroll;
}

问题根源与解决方法 #

问题出在my-second-component.ts的组件配置中，缺少了CSS文件的styleUrls配置项，导致组件的样式文件未被Angular加载，滚动条样式自然无法生效。只需在@Component装饰器中补上该配置即可：

@Component({
  selector: 'my-second-component',
  templateUrl: './my-second-component.component.html',
  styleUrls: ['./my-second-component.component.css'] // 之前缺失的配置项
})

内容的提问来源于stack exchange，提问作者TomSelleck