Angular 如何为可复用组件添加差异化样式？

实现方案 #

因为你的输入框是可复用组件，只需要给不同使用场景的组件绑定差异化样式即可，不用改动组件核心逻辑，具体操作如下：

• 第一步：给两种场景的输入框增加区分标识
  给顶部的高亮输入框添加自定义类highlight-search-input，给表格内部的输入框添加自定义类table-cell-input，示例调用代码：

  <!-- 顶部高亮输入框位置 -->
  <app-your-input class="highlight-search-input" [(ngModel)]="searchValue"></app-your-input>
  
  <!-- 表格单元格内的输入框位置 -->
  <td>
    <app-your-input class="table-cell-input" [(ngModel)]="row.itemValue"></app-your-input>
  </td>
  

• 第二步：添加差异化样式
  如果你用Angular默认的样式封装模式，可以直接在可复用输入组件的样式文件里添加如下代码：

  /* 适配顶部高亮输入框 */
  :host(.highlight-search-input) input {
    width: 420px; /* 按需调整为你需要的宽度 */
    height: 46px; /* 按需调整为你需要的高度 */
    font-size: 16px; /* 可以同步调整字号适配高度 */
  }
  
  /* 适配表格内输入框 */
  :host(.table-cell-input) input {
    width: 110px; /* 按需调整为缩小后的宽度 */
  }
  

  如果你不想修改复用组件的内部样式，也可以在调用组件的父页面样式文件里用穿透写法，注意加外层容器限制避免污染全局样式：

  /* 假设顶部输入框的外层容器类为top-bar */
  .top-bar ::ng-deep .highlight-search-input input {
    width: 420px;
    height: 46px;
  }
  
  /* 假设表格的外层容器类为data-table */
  .data-table ::ng-deep .table-cell-input input {
    width: 110px;
  }
  

如果样式不生效，可以调高选择器优先级，或者检查是否有全局样式覆盖了自定义配置。

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