Angular Material组件自定义规范疑问：能否通过自定义类修改高度？

官方指南原文翻译 #

避免定义会影响组件尺寸或内部布局的自定义样式，例如内边距（padding）、高度（height）、宽度（width）或溢出（overflow）。你可以指定display: none来隐藏组件，但避免使用其他任何display值。覆盖这些属性可能会在版本更新时因内部样式变化而导致组件意外崩溃。

核心疑问解答 #

• 是否完全不能修改height这类属性？
  不是绝对禁止，但属于高风险操作。指南的核心是提醒你：Material组件的内部布局逻辑会随版本迭代更新，直接改height、width这类属性，很可能在后续版本中因为官方调整了组件内部元素的尺寸、定位规则，导致你的自定义样式和官方样式冲突，最终出现布局错乱、交互异常等问题。

• 添加自定义类修改按钮高度是否可行？
  你示例里的写法（给按钮加mybutton类并设置height: 50px）语法上能生效，但同样存在兼容性风险。比如未来官方更新按钮的内部结构（比如新增内部容器、调整默认flex布局），你的自定义高度可能会挤压内部元素，或者导致按钮的hover、active等交互状态显示异常。

兼顾兼容性的自定义建议 #

• 优先用官方提供的预设配置：比如Angular Material按钮支持size="small"或size="large"属性，尽量用官方预设的尺寸选项，这是官方保证兼容的。
• 间接控制尺寸：如果需要自定义尺寸，优先给组件套一层外部容器，通过设置容器的尺寸让组件自适应，而不是直接修改组件本身的height/width。
• 谨慎直接修改：如果必须直接修改组件样式，只针对特定场景设置，并且在Material版本更新后及时做回归测试，避免出现样式冲突。
• 绝对避免修改内部元素：不要用::ng-deep这类深度选择器去修改组件内部的子元素样式，这种操作最容易在版本更新时导致组件崩溃。

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