能否在不修改基础按钮组件的前提下调整按钮宽高？

• 直接通过属性绑定设置行内样式
  在引用基础按钮的父组件模板里，用属性绑定直接给按钮元素设置宽高：

<app-base-button [style.width.px]="200" [style.height.px]="50"></app-base-button>

也可以用ngStyle批量配置样式：

<app-base-button [ngStyle]="{width: '200px', height: '50px'}"></app-base-button>

• 用CSS样式穿透修改宿主按钮
  如果你的项目用了组件样式隔离（比如Angular的默认隔离），可以在父组件的样式文件里用样式穿透来修改基础按钮里的<button>元素：

::ng-deep app-base-button button {
  width: 200px;
  height: 50px;
}

也可以给基础按钮加个自定义类名，针对性设置样式：
父组件模板：

<app-base-button class="large-btn"></app-base-button>

父组件样式：

::ng-deep .large-btn button {
  width: 200px;
  height: 50px;
}

• 通过CSS变量实现灵活控制
  先在基础按钮组件的样式里定义CSS变量作为宽高的默认值：

button {
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
}

之后在父组件里，不管是行内样式还是类名，都能轻松覆盖变量值：
行内样式方式：

<app-base-button [style.--btn-width]="'200px'" [style.--btn-height]="'50px'"></app-base-button>

类名方式：
父组件样式：

.custom-size {
  --btn-width: 200px;
  --btn-height: 50px;
}

父组件模板：

<app-base-button class="custom-size"></app-base-button>

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