Angular Material下拉菜单自定义样式不生效问题求助

问题场景 #

使用Angular Material的MatMenuModule和MatButtonModule实现年份选择下拉菜单，自定义CSS样式（如按钮背景、边框、高度，菜单选项的高度、字体）多数不生效，下拉菜单尺寸过大、字体不匹配，已开启ViewEncapsulation.None但问题依旧。

解决方案 #

通过提高选择器优先级或直接定位Material组件内部元素覆盖默认样式：

1. 修复触发按钮（selectYearButton）样式

Material的MatButton自带默认样式，需用更具体的选择器覆盖：

.selectYearButton.mat-button {
    background-color: gainsboro;
    border: 1px solid #000;
    height: 30px;
    letter-spacing: .05rem;
    font-weight: 400;
    font-family: 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 30px;
    padding: 0 16px;
}

• 组合.selectYearButton.mat-button选择器，提升优先级以覆盖Material默认样式
• 合并border属性简化代码，添加line-height和padding优化按钮文字显示

2. 修复菜单选项（yearOptionButton）样式

MatMenu选项高度由内部.mat-menu-item-content控制，字体需覆盖Material全局默认值：

.yearOptionButton.mat-menu-item {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    min-height: 10px !important;
    line-height: 10px;
    padding: 4px 16px;
}

.yearOptionButton.mat-menu-item .mat-menu-item-text {
    font-family: inherit;
}

• 使用.yearOptionButton.mat-menu-item定位选项，用min-height替代height（符合Material组件布局逻辑）
• 调整padding缩小选项整体尺寸，通过.mat-menu-item-text确保字体样式生效

额外注意事项 #

若开启ViewEncapsulation.None后样式污染全局，可改用::ng-deep实现样式穿透：

::ng-deep .selectYearButton.mat-button {
    /* 样式同上 */
}

::ng-deep .yearOptionButton.mat-menu-item {
    /* 样式同上 */
}

• 尽量避免过度使用!important，优先通过选择器优先级解决样式冲突，仅必要时使用

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