如何使用CSS/SCSS和Tailwind实现Angular Material自定义对话框自定义头部

问题背景 #

我尝试通过CSS/SCSS和TailwindCSS框架，创建带有自定义头部的Angular Material自定义对话框，预期效果如下：

预期效果 #

经过多次调试后，目前实现的效果如下：

当前效果 #

当前问题：无法将头部下方、Material图标周围的白色区域填充为指定的黄色背景色。

代码示例 #

HTML代码

<div class="w-full bg-gray-50 dark:bg-gray-900">
    <div class="edit-dialog-header">
        <div class="edit-dialog-header-title pl-5 pr-10 pt-4 uppercase w-max" fxLayout="row" fxLayoutAlign="start">
            <div class="font-bold">Dialog title</div>
            <span class="edit-dialog-button-exit">
                <button class="p-1" [mat-dialog-close]
                        matTooltip="Close"
                        mat-icon-button>
                    <mat-icon>close</mat-icon>
                </button>
            </span>
        </div>
        <div class="edit-dialog-header-subtitle pl-5 pr-5 uppercase">Dialog subtitle</div>
        <div class="grid justify-items-center edit-dialog-header-footer">
            <mat-icon class="material-icons-round badge w-10 h-10">link</mat-icon>
        </div>
    </div>
    <div> Some Content ... </div>
</div>

CSS代码

.mat-dialog-container {
    padding: 0px;
    position: relative;
}

.mat-dialog-content {
    margin: 20px;
}

.edit-dialog-header {
    background-color: #929aa0;

    .edit-dialog-header-footer {
        background: #ffffff;
        background: linear-gradient(0deg, #ffffff 50%, rgba(146, 154, 160, 1) 50%);

        mat-icon {
            font-size: 20px;
        }

    }

    .edit-dialog-header-title, .edit-dialog-header-subtitle {
        color: #fbfbfd;
    }

    .edit-dialog-header-title {
        font-size: x-large;
    }

    .edit-dialog-header-subtitle {
        font-size: medium;
        font-weight: normal;
    }

    .edit-dialog-button-exit {
        button {
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            background-color: #929aa0;

            mat-icon {
                color: #fbfbfd;
            }
        }
    }
}

.badge {
    font-weight: bold;
    color: #fbfbfd;
    background: #929aa0;
    border-radius: 50%;
    padding: 5px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

解决方案 #

核心修改点 #

1. 替换.edit-dialog-header-footer渐变配置中的白色值为目标黄色，示例使用#ffc107作为参考黄色，可根据需求调整色值
2. 修正.badge的行高、内边距配置，避免图标错位产生额外间隙
3. 重置mat-icon默认行高，消除内置样式带来的偏移

修改后CSS代码片段 #

.edit-dialog-header {
    background-color: #929aa0;

    .edit-dialog-header-footer {
        /* 替换渐变下半部分的白色为目标黄色 */
        background: linear-gradient(0deg, #ffc107 50%, rgba(146, 154, 160, 1) 50%);

        mat-icon {
            font-size: 20px;
            line-height: 1;
        }
    }
    /* 其余原有配置保持不变 */
}

.badge {
    font-weight: bold;
    color: #fbfbfd;
    background: #929aa0;
    border-radius: 50%;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
}

补充说明 #

如果需要整个对话框内容区域背景都为黄色，直接将最外层w-full bg-gray-50容器的背景色修改为目标黄色即可，无需单独调整渐变配置。

内容的提问来源于stack exchange，提问作者Samuele Domenico Ruffino