Angular 17子组件CSS继承问题：如何让子组件输入框继承父宽？

问题根源 #

父容器.wrapper-my是flex列布局且设置了align-items: flex-start，导致子元素默认不会自动拉伸占满父容器宽度。独立的<input>能通过width: inherit填满是因为它直接作为flex子项，但<app-input-my>是Angular组件，其宿主元素默认是display: inline——即使添加.my-class，width: inherit也无法让宿主元素占满父容器，进而子组件内的输入框只能继承宿主的窄宽度。

解决方案 #

方案1：修改子组件宿主元素样式（推荐）

在app-input-my的样式文件中，通过:host选择器设置宿主元素的布局属性，让它先占满父容器宽度，再让内部输入框继承这个宽度：

/* app-input-my.component.css */
:host {
  /* 让宿主元素在flex布局中自动拉伸占满宽度 */
  align-self: stretch;
  /* 也可以直接设置宽度100%，同时确保元素是块级/行块级 */
  /* width: 100%;
  display: block; */
}

.my-class2 {
  width: inherit; /* 此时继承的是宿主的100%宽度 */
  /* 也可直接设为width: 100%，更直观 */
}

方案2：父组件中控制子组件宿主样式

如果需要从父组件统一控制，可在父组件样式中使用::ng-deep穿透组件封装（注：::ng-deep已标记为deprecated，但目前仍可使用，或改用viewEncapsulation.None）：

/* 父组件样式文件 */
.wrapper-my ::ng-deep app-input-my {
  width: 100%;
  display: block;
}

同时子组件内的.my-class2保持width: inherit即可。

额外修复：父容器样式的语法错误

原.wrapper-my样式中缺少两个分号，会导致样式失效，需修正：

.wrapper-my {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch; /* 补充分号 */
  width: 100%; /* 补充分号 */
}

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